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CONCLUSÃO 


INTRODUÇÃO 


O Dreamweaver é não só outra ferramenta de visual de HTML. Ele faz o que 
todos os melhores editores fazem: cria tabelas, edita quadros e alterna 
facilmente da visualização de páginas para visualização HTML. 

Mas o Dreamweaver vai além dos outros editores para permitir criar animações 
e páginas dinâmicas (DHTML). O Dreamweaver suporta completamente as 
folhas de estilo em cascata (CSS), bem como camadas e comportamento de 
JavaScript. Ele também inclui sua própria ferramenta de animação DHTML. E 
um cliente FTP repleto de recursos, que incluem mapas visuais do site, está 
embutido dentro dele. 

Entre as principais novidades da versão CS3, está a nova aba SPRY, que é um 
framework para utilização de tecnologia AJAX 
(http://pt.wikipedia.org/wiki/AJAX (programação) . 

Outra grande novidade é pelo fato de parti-la dessa versão o Dreamweaver 
fazer parte da Adobe, então o dreamweaver possui uma integração muito boa 
com o Photoshop. 

Integração com o Adobe Device Central, que possibilita você visualizar seu site 
em um aparelho de celular. 

Quando iniciar o Dreamweaver pela primeira vez, você verá uma janela 
principal, que permite a você criar documentos estáticos (HTML) e dinâmicos 
como Coldfusion, PHP, ASP, ASP. NET e arquivos CSS. 


Dw Adobe Dreamweaver C53 (8 x| 
File Edit View Insert Modify Text Commands Site Window Help 


ADOBE” DREAMWEAVER” CS3 


Open a Recent Item Create New Create from Samples 


T) ABABTG /abaktg html E HTML E) CSS Style Sheet 

E] Desktop/ATTODO86.dat T) ColdFusion Ta] Frameset fl No Tag £ 

E) domparmaldomparma180708.Html $) PHP E] Starter Page (Theme) ETE) Behaviors 
E) domparmaldomparma160708.htmi | E] ASP VBScript TE] Starter Page (Basic) E eo ee 
“E Flash Tutorialicaptions. xml TH] XSLT (Entire page) © More... 

E] ¡ulhod8/elenews.html T css 

E iunhoosielenews. html Fl] JavaScript Extend 

a Desttopándex.html T) xm @ Dreamweaver Exchange > 

E] estrela da terra...reladaterraC.htr da Dreamweaver Site... 

B Open... B More... 

[I Getting Started » Security Update Available Files Assets | Snippets 
[O New Features » Dw Download this update for the Insert Flash 

|] Resources » Video command in Dreamweaver, 


3 Meu computador 

“ Meus locais de rede 
SE FTP &RDS Servers 

ED Desktop items 


(O ABABTG 
© bonificacoes 
B mont 
8 elemidia reprint... sol 
» 
Log... | 


Nessa tela, vocé tem na esquerda os documentos abertos recentemente ou 
abrir um arquivo existente. Na tela central, podemos definir os tipos de arquivos 
a serem criados. Na tela da direita ele apresenta alguns templates. Na opção 
Extend, existe o link Dreamweaver Exchange, que permite você acesse o setor 


do site da Adobe onde poderá ter acesso a extensões dos programas Adobe. 


D 

Embora não seja um pré-requisito para utilizar o Dreamweaver, é de 
extrema importância que ao criar um site você tenha uma base da linguagem 
HTML. Pois mesmo para o entendimento do que será apresentado durante 


essa apostila, para muitas coisas ele será necessário. 


PROJETO DE UM SITE 


No Dreamweaver podemos editar páginas HTML únicas como podemos 
gerenciar sites, ou seja, controlar todo o projeto que está sendo feito, o que é 
recomendado para a construção de seu site. 

Na tela que se abre na coluna do meio temos a opção Dreamweaver Site 
Clique nessa opção. Ele vai abrir um assistente de criação do ambiente site. 


Site Definition for portfolio 


Basic | advanced | 


Site Definition 


Editing Files Testing Files Sharing Files 


à site, in Adobe Dreamweaver C53, is a collection of files and folders that corresponds to a 
website on a server. 


What would you like to name your site? 


[bortrolo] 


Example: mySite 


What is the HTTP Address (URL) of your site? 


| http: //multimidiacarte.com/portfolio/ 


Example: http: una, myHost.comfmySite 


IF you want to work directly on the server using FTP or RDS, you should create an FTP or RDS 
server connection, Working directly on the server does not allow you to perform sitewide 
operations like link checking or site reports. 


coca | meo | 


Nessa etapa vocé deve dar um nome ao seu site e caso já tenha um domínio 


para ele pode preencher o campo URL. Ainda nessa tela, podemos observar 
que acima temos dois modos de criar nosso ambiente de site a opcáo “Basic” a 
que estamos utilizando ou a opção “Advanced” que permite preencher todas as 
etapas da opcáo “Basic” mais rapidamente. Dé um nome ao seu site e clique 
em NEXT. 


Site Definition for portfolio E xi 


Basic | Advanced | 


Site Definition 


Editing Files, Part 2 Testing Files Sharing Files 


Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? 


™ No, | do not want to use a server technology. 
(* Yes, | want to use a server technology. 


Which server technology? 
PHP MySQL 


< Back || text > ] Cancel | Help | 


Na segunda etapa deve-se definir se vai ou não trabalhar com páginas 
dinâmicas (ASP, PHP, ASP. net, CFM, etc..). 

No caso eu escolhi a opção PHP MySQL, pois os servidores onde serão 
testado os arquivos de nossa apostila dão suporte a essa tecnologia. 


Conteúdo dinâmico é o conteúdo de um site que é apresentado ao 
visitante através de requisições feitas no servidor onde ele está hospedado. 
Através de conteúdo dinâmico podemos acessar a bancos de dados, e páginas 
que são montadas de acordo com as solicitações feitas pelo visitante. 


Se você não vai utilizar conteúdo dinâmico, você pode marcar “No, i do not 


want to use a server technology”. 
Clique em NEXT, na etapa seguinte, é necessário direcionar o site para a pasta 


em seu computador onde ficarão os arquivos de seu site. 


Site Definition for portfolio x| 


Basic | Advanced | 


Site Definition 


Editing Files, Part 3 Testing Files Sharing Files 


How do you want to work with your files during development? 


© Edit and test locally (my testing server is on this computer) 
(+ Edit locally, then upload to remote testing server 
© Edit directly on remote testing server using local network 


Where on pour computer do you want to store your files? 


[D:\aps_dream\dream\ oO 


< Back || text > ] Cancel | Help | 


No caso escolhi a opção de editar os arquivos localmente e fazer o upload para 


o servidor remoto 

Na próxima etapa é necessário definir como será feita a conexão com seu 
servidor. Se você ainda não possui um servidor para hospedar seu site, nessa 
etapa escolha “None”. Mas caso já tenha um servidor para hospedar seu site 
escolha FTP (File Transfer Protocol). 

Se essa for a sua opção será necessário preencher os campos do endereço 
FTP (esse endereço é fornecido pelo seu provedor de hospedagem). Na 


segunda opção onde na imagem aparece “www" é a pasta para seu site. 


Alguns servidores de hospedagem solicitam que seu site fique dentro de uma 
pasta, a maior deles usa a pasta “www” ou “public html”, mas isso deve ser 


verificar com seu servidor de hospedagem. 


Site Definition for portfolio x| 


Basic | Advanced | 


Site Definition 


Editing Files Testing Files Sharing Files 


How do you connect to your testing server? 
[FTP y] 


What is the hostname or FTP address of pour Web server? 
[ftp. seuftp. com. br 


What folder on the testing server do you want to store your files in? 
¿p 


What is pour FTP login’? 
login 


What is your FTP password? 
| e.... IV Save 


J” Use Secure FTP (SFTP) 


Test Connection 


< Back || text > ] Cancel | Help | 


É aconselhável sempre clicar no botão “Test Connection” para ver se houve 


comunicação. 
xi 


e 
1 ) Adobe Dreamweaver C53 connected to your Web server successfully, 


A etapa seguinte somente será disponível se vocé preencheu os dados para 
comunicacáo FTP. 
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Site Definition for portfolio l x| 


Basic | Advanced | 


Site Definition 


Editing Files Testing Files, Part 2 Sharing Files 


Dreamweaver communicates with your testing server using HTTP (just like a browser), so it needs 
to know the URL of your site's root folder. 


What URL would you use to browse to the root of your site? 


[http://www multimidiaearte. com/porttfolio 


Example: http://ServerOne/RootF older? 


Test URL 


< Back | Next > | Cancel | Help | 


Você deve preencher o endereço de seu site. Caso você esteja testando seu 


site somente localmente, essa etapa não será mostrada 

É a opção “Yes, enable check in and check out “e “No, do not enable check in 
and check out”. 

Essa opção permite ao se trabalhar em site de forma colaborativa, onde mais 
de uma pessoa manipule o site que quando um profissional pegar um arquivo 
no servidor para alteração ele marca o mesmo como “check in” caso outro 
profissional venha a precisar do mesmo arquivo, ele avisará que o mesmo já 
está marcado e só libera para alteração do mesmo quando for dada a ele a 
opção “check out”. 
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Site Definition for portfolio x| 


Basic | Advanced | 


Site Definition 3 


Editing Files 


Testing Files Sharing Files 


Do you want to enable checking in and checking out files, to ensure that you and your co-workers 
cannot edit the same file at the same time? 


@ Yes, enable check in and check out. 

© No, do not enable check in and check out. 

When you open a file that isn't checked out, should Dreamweaver check it out, or do you want to 
view a read-only copy? 

@ Dreamweaver should check it out. 

C | want to view a read-only copy. 


What is your name? 
marcos 


What is your email address? 


[marcospfurlan2gmail. con 


< Back || n> ] Cancel | Help | 


Somente marque a opção de “Yes, enable check in and check out”, caso tenha 
mais de uma pessoa criando/alterando o site. 
Clique em Next, será apresentada uma tela de resumo, pode concluir o 


assistente. 
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Site Definition for portfolio xi 


Basic | Advanced | 


Site Definition — F 
2. 


Summary 


Your site has the following settings: 


Local info: 
Site Name: portfolio 
Local Root Folder: D:taps dreamtdreamt 


Remote info: 
Access: FTP 
FTP Host: ftp. multimidiaearte. com 
Check-in/check-out: Enabled. 


Testing server: 
Access: FTP 
FTP Host: ftp. multimidiaearte. com 


‘Your site can be further configured using the Advanced Tab. 


Na barra lateral direita agora ele mostra as configurações de seu ambiente 
Site. 


15 No Dreamweaver é possível se trabalhar em 
vários projetos de site, caso precise alternar 


entre eles, basta clicar nessa opção. 


2> Aqui temos a visão de seu site local (Local 
view - em sua máquina) e Remote view (em seu servidor). 

3>Permitem conectar / desconectar com seu servidor. 

4> Permitem dar um Refresh (recarregamento) em sue site. Isso é útil caso 
você venha a editar algum arquivo de site fora do Dreamweaver, situação 


comum com imagens e animações flash. 
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5> Permitem baixar de seu servidor arquivo para alteração local. 

6> Permitem subir para seu servidor algum arquivo local. 

7> Permitem dar check out em um arquivo 

8> Permitem dar check in em um arquivo 

9>Permitem expandir a tela de site, ele vai mostrar duas colunas, a da 
esquerda são sua máquina e a da direita o seu servidor. 

Caso seja necessário alterar qualquer configuração de seu site, basta clicar no 
Menu Site, Manage Sites, escolhe o site a ser reconfigurado e clicar no botão 
Edit. 


CRIANDO DOCUMENTOS 


O Dreamweaver CS3 tem entre suas propriedades a possibilidade de se criar 
sites dentro de padrões da W3C (www3c.org) que é órgão que cuida das 
especificações técnicas de desenvolvimentos de tecnologias aplicadas à web 
sites. 

Então ao se criar uma página HTML, ele vai criar ela no padrão XHTML, que é 


um padrão que permite uma validação correta para suas páginas. 


XHTML é uma reformulação da linguagem HTML (Hypertext Markup 
language) baseada na XML (Extensible Markup Language). Em 
termos de sintaxe, a XHTML não é tão tolerante como a HTML. Isso 
ocorre porque a XHTML utiliza as rígidas regras de XML para realizar as 
marcações em um documento. Por padrão a XHTML separa a TAG (elemento 
que permite definir qual comando será utilizado) e as propriedades para a 
mesma. 
Você pode através da tela de abertura criar sue documento HTML, ColdFusion, 


PHP, etc..., como pode também clicar na opção “More...”, embaixo de todas. 
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New Document x 


Page Type: 


T =) HTML 
B Blank Page 


Layout: 
<none> 


JavaScript 
| XML 


To Library item 1 column elastic, centered, header and 
3 Blank Template E) XSLT (Entire page) 1 column fixed, centered 

=) XSLT (Fragment) 1 column fixed, centered, header and f 
yl = ActionScript 1 column liquid, centered 
= Page from Template = css 1 column liquid, centered, header and F 

= 


=>) ASP VBScript 


HTML template 1 column elastic, centered 


2 column elastic, left sidebar 

2 column elastic, left sidebar, header al 
2 column elastic, right sidebar 

2 column elastic, right sidebar, header « 


sm y 
g Other ES 2 column fixed, left sidebar 
2 column fixed, left sidebar, header am 


D ASP.NET C# 2 column fixed, right sidebar 

po] ASP.NET VB 2 column fixed, right sidebar, header aí 
=) ColdFusion 2 column hybrid, left sidebar 

=) ColdFusion component 2 column hybrid, left sidebar, header ar 
9 JSP 2 column hybrid, right sidebar 

cc) PHP 2 column hybrid, right sidebar, header . 


2 column liquid, left sidebar 
2 column liquid, left sidebar, header am 
2 column liquid, right sidebar 


HTML document 


DocType: 


Layout 


Attach CSS file: e n 


<No preview> 


Essa opcáo abre a possibilidade de se criar os diversos tipos de documentos, 


além de utilizar um tipo de layout, na direita da tela têm a opção de escolha do 


z 


tipo de documento HTML, o padrão é “XHTML 1.0 Transitional”, mas você pode 
mais sobre XHTML 


escolher outro tipo de documento. 


(http://pt.wikipedia.org/wiki/XHTML). 


Para saber 


Ao Clicar em Create, ele cria seu primeiro documento HTML. 


Bw Adobe Dreamweaver CS3 - [Untitled-1 (XHTML)] 
Ele Edit View Insert Modify Text Commands Site Window Help 


18) x! 


A8-8-ASQo-e-|B-e 


[5] Design | Title: | Untitled Document 


Bt. ©, | e HLS | [ES checkpase 


PRP PRP RR E RAR A A A AA AA CMA A ER RA o A 


ense! Common “Layo | Forme [Data a [avos | 


E Databas (Bindings Server Behaviors Compone 


To use dynamic data on this page: 
v 1, Create a site for this file. 


Format [None al Style | None +] css | 


2, Choose a document type. 
3, Set up the site's testing server. 


TCS Behaviors 


je portfolio y] [Local view 2 
Rcec|soya ela 


arjejsjaje] im a $ 
Font [Defaut Font +] size [one z z E e5|25| trot >] 


Page Properties... List Item... 
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Propriedades da página 
As propriedades da página são elementos que se aplicam a uma página inteira, 


em vez de somente a um objeto na página. As propriedades visuais incluem o 
título da página, uma cor de fundo ou imagem e as cores do texto e do link. 
Outras propriedades de página incluem a codificação de documento e as 
pastas de site, se houver. 

Clique em Modify, Page Properties. 


xi 
Category Appearance 
Links Page font: [ Verdana, Arial, Helvetica, sans-serif. y] BiZ | 
dec Size: fu y] [pixels y] 


Tracing Image 


Text color: E [4000000 | 
Background color: E [#FFFFFF | 

Background image: [o Browse... | 
Repeat: | H 


Left margin: [o [pixels y] Right margin: [0 [pixels y] 
Top margin: [o [pixels y] Bottom margin: [0 [pixels y] 


Cancel | Apply | Help | 


z 


Na janela que se abre temos várias categorias, a primeira delas é a 
Appearance (Aparência), nessa categoria podemos definir o tipo de fonte da 
página, estilo (negrito e itálico), tamanho. Cor de texto e cor de fundo, imagem 
de fundo e as propriedades dessa imagem (se ele se repetira ou não) e 
margens. 

Na guia links, podemos definir como serão apresentados os links, quando os 


mesmos forem textos. 
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Page Properties x 


Links 


Category 


Appearance 


Link Font: [ Verdana, Arial, Helvetica, sans-serif. y] B|7 | 
Link color: E [#000000 | Rollover links: E [#666666 | 
visited links: E [4000000 | Active links: E [4000000 | 


Underline style: Show underline only on rollover 


Cancel | apply | Help | 


Podemos definir a fonte dos mesmos tamanho, cód do link (forma como ele vai 


aparecer na página), Rollover links (muda a cor do texto quando link ao se 
passar o mouse sobre ele), Visited Links (cor a ser mostrada em links já 
visitados pelo visitante de seu site), Active Links (cor do texto a ser mostrada 
quando clicado sobre o link). Underline Style: é como deve ser aplicado o 
sublinhado em seus links, no caso da imagem está para ser mostrado 
conforme o mouse passar pelo link. 

A terceira Categoria Headings é relativa à formatação dos títulos de sua página 


(O HTML permite a configuração e utilização de até 6 tipos de títulos) 


Page Properties RE: 
Category Headings 


Appearance 
que Heading font: [verdana, Arial, Helvetica, sans-serif y] [B F | 


Title/Encoding Heading 1: [j4 y [pixels x] E [4000000 
Tracing Image praça [2 + nas 18] E [000000 | 
Heading 3: [ H pixeis +] [A ; 
Heading 4: | H E| Do] 


Heading 5: | y] [pixels z| El 
Heading 6: | y] [pixels z| Ej 


Help | Cancel | Apply | 
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A guia Title / Encoding, como o próprio nome diz é referente ao título da página 
(o mesmo que aparece na janela de seu navegador) e a codificação do HTML a 


ser utilizada. 
x 
Category Title/Encoding 


Appearance 
Limks 
Headings 


Title: | Untitled Document 
Document Type (DTD): fete 1.0 Transitional y] 


Encoding: [Unicode (UTF-8) y] Reload | 
Unicode Normalization Form: lc (Canonical Decomposition, Follow, y] 


[Include Unicode Signature (BOM) 


Tracing Image 


Document Folder: 


Site folder: D:laps_dreamidream, 


Help | Cancel | Apply | 


A última guia é referente à imagem de rastreamento. 

Ao se clicar em OK, ele retorna a página do Dreamweaver, você pode observar 
que no topo da janela aparece como documento não salvo o tipo de documento 
e o asterisco representa que o 
arquivo não foi salvo, ele sempre irá aparecer quando você modificar seu 
documento. Para você salvar rapidamente um documento ao qual se esta 
trabalhando use as teclas de atalho CTRL+S. 

O arquivo por padrão será salvo com a extensão html. Se o arquivo a ser salvo 


for à primeira página de seu site ele deve ter o nome de index (index.html). 


Observe que o arquivo agora é mostrada na direita junto dentro da aba Files 


Files Assets | Snippets 


[a portfolio +] [Local view y] 
Rc clsoyaal|a 
| Size[ Typ 


(3 Site - portfolio (D... 
=) index.html 2KB Firefox E 
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J 


—< 


O nome “index” deve ser dado ao arquivo que sera mostrado em seu 
site quando o visitante digitar o seu dominio, como por exemplo 
http://www.multimidiaearte.com, ao digitar o endereço ele vai procurar em seu 
diretório o arquivo index, no caso index.html, e vai mostrar ele na tela do 
navegador. Alguns webdesigners optam por usar o nome default, caso exista 
os dois arquivos, a preferência fica para o index. 


— A extensáo html deve ser utilizada em páginas web que náo 
Y contenham blocos de códigos dinámicos. Páginas que contenham 
blocos de código PHP devem ser salvas com essa extensáo. Outro 
fator importante é que as maiorias dos servidores de hospedagem utilizam 
como sistema operacional e servidor web Linux+Apache, isso fará com que o 
reconhecimento dos arquivos seja Case Sensitive (diferenciem maiúsculas de 


minúsculas), ou seja, Arquivo e diferente de ARQUIVO e diferente de arquivo. 


Publicando seu arquivo 
Para publicar o arquivo recém criado, você pode na aba files clicar no botão Pu 


File(s) t . Ele mostra a tela de conexao. 


Dw Background File Activity - portfolio = iol x] 


Connecting to portfolio. 


EEE 
Hide | Cancel | 


Ao término ele mostra ao lado do arquivo enviado um aviso em verde. 


“les Assets | Snippets oo 
G portfoio Biliocalven E 
RIC|ISOVYVAB|F 


3 © Site - portfolio (D... Folder 


Para poder ver o arquivo publicado, clique onde está escrito “Local view” e 


escolha “Remote View”. 
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Files Assets | Snippets 


la portfolio y] [Remote view y] 
RJOISeyraala 


Remote Site 
E ¿public_htmifportfoliof 
Tv index.html 


tpublic htmlfportfolio/ 


Você pode também ter uma janela onde fique fácil de arrastar arquivos de uma 
janela para outra. Basta clicar no último botão da aba. 


Files Assets | Snippets 


E portfolio +] Remote view Y 
Rejs ey e e (E) 


Remoa- cit- 
Expand to show local and remote sites 


aa > 
‘To index.html 


File Edit Yiew Site 
Show: [© portfolio +] EN G IFBEAES) y $ iy ta 8 E] 


1 fpublic A | [E © ste - portfolio (D... 
@ ‘index.html 


Folder 23/7/2008 17:1 


2KB Firefox D... 23/7/2008 17:0 


2KB Firefox D 


e 1 local items selected totalling 1099 bytes, Log... | 


INTERFACE 


Ao criar seu primeiro arquivo o Dreamweaver ele apresentara na parte superior 
a barra de menus, abaixo dela temos a barra de Inserção de conteúdo, essa 


barra pode ser vista de duas formas em forma de Menu. 


Common Y Rok agu- w- HPO- E) - (7 
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Onde as opções estão junto à palavra Common (flechinha) ao se clicar nessa 
opção ela vai mostrar as demais opções de botões de inserção, a ultima opção 
desse menu, chamam-se Show as Tabs, que permite visualizar as opções em 
forma de abas na parte superior. 

é w Insert common Layout | Forms | Data | Spry | Text | Favorites 


“E & BU-teBoyo-S-|D- a 


No final dessa barra temos um botão * que permite voltar à visualização de 


Menus (Show as Menu), a forma de utilização fica ao “gosto” de cada 
profissional, em nossa apostila a deixaremos na opção de abas. 
Abaixo dessa barra temos a barra de documentos. 


index.html 


É so] Code EE: LE] Design | Title; | Untitled Document It. ©. | cas | B, [A Check Page 


Nessa barra para cada documento aberto ele mostrará uma aba, abaixo dessa 
aba temos os botões de forma de visualização do documento, de título do 
documento, checagem de compatibilidade com navegadores, checagem de 
erros de sintaxe de código, comunicação com o servidor de hospedagem, 
previsão do documento no navegador, recarregamento da página (opção 
interessante quando a mesma foi manipulada fora do Dreamweaver com o 
documento aberto), opções de visualização de componentes auxiliares na 


página, Visual Aids. 
Formas de visualização 
No Dreamweaver é possível trabalha com seu documento de três formas: 


Design ES] Design Essa forma é a que mais se aproxima dos editores de textos 
comuns, pois é toda visual, bastando inserir conteúdos no documento e digitar 
os textos. 


PI - 
Split EES Essa opção divide a sua tela em duas partes, sendo a de cima a 
página sendo vista através de códigos e a parte de baixo de forma design. 
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API ar 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http: //w00.03.o0rg/TRIx 
<html xmlns="http: //www. w3. org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type” content="text/html; charset=is0-8859-1" /> 
<title>Curso de Dreamweaver</title> 
<style type="text/css"> 

1 


body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: llpx; 
color: #000000; 

$ 

body { 
background-color: #FFFFFF; 
margin-left: 0px; 
margin-top: 0px; 
margin-right: Opx; 
margin-bottom: Ovx: 


Code (:2] Code | Essa opção vai mostrar o seu documento sendo visto através da 


codificação HTML, quando se tem conhecimento de códigos HTML, em 


algumas situações essa forma de visualização se torna mais rápida e pratica. 
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SS 


ni erao] Ee] 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt; 
<html xmlns="http: //www. w3. o0org/1999/xhtul"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-885 
<title>Curso de Dreamweaver</title> 

<style type="text/css"> 


E [sa] Code < Split S| Design Title: | Curso de Dreamweaver re! e? Ma | [6] 
1 


body,td,th ( 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: llpx; 
color: #000000; 

} 

body { 
background-color: #FFFFFF; 
margin-left: Opx; 
margin-top: Opx; 
margin-right: Opx; 
margin-bottom: Opx; 


font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: llpx; 
color: #666666; 


a:link { 
text-decoration: none; 


} 


Visualização do Documento 
É sempre importante ao desenvolver um site que ele tenha um comportamento 


semelhante nos principais navegadores (Internet Explorer e Firefox), como o 


Dreamweaver também da suporte ao device Central que permite ver seu site 


em celulares. 
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Para poder ver como ficará a sua página, basta clicar no botão preview/Debug 
in Browser. 
O CE. S | ES checkers 


Preview in Firefox 
Preview in IExplore Ctri+F12 
Preview in Device Central Ctri+Alt4+F12 


Edit Browser List... 


Ao clicar na opção Edit Browser List, você pode definir qual o navegador de 


prioridade, adicionar ou remover navegadores, etc... 


Paletas 
O Dreamweaver como os demais programas Adobe® possuem para a maioria 


de seus comandos paletas, posicionadas á direita da tela. 
ES 


=) Application 
i P Tag Inspector 
cow Files = 


Files Assets | Snippets 


[© portfolio -] [Remote view y] 
R]C|S ¢ v a ajg 


Remote Site 
E (53 !public htmlfportfoliof 


SD index.html 


fpublic htmlfportfolio/ 


Você pode habilitar / desabilitar as paletas através do Menu Window. 


Barra de Propriedades 
Na parte inferior de seu documento, será mostrada a barra de propriedades, 


essa barra é dinâmica de acordo com o que está selecionado em seu 
documento. Quando não há nada selecionado ele mostrará as propriedades de 


texto do documento. 
E 
w| ran 2 
Target | =] 


“ w Properties 


Format [None y] Style | None y] css B\Z | 
Font | Verdana, Arial, +] Size [11 =] [pixels JE #000000 


TRABALHANDO COM TEXTOS 


A formatação de textos dentro de um documento HTML é muito semelhante a 
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formatação em editores de texto, com algumas ressalvas 
Podemos adicionar observações de textos invisíveis chamados comentários, 
como anotações para seus documentos. 


ii vw Properties = 
Format [None y] Style [none =| cs | B|z|=|=|=|Æ| uk 135 © 
Font | Verdana, Arial, +] Size|11  wllpixels y E #000000 f= ES z| Target y 


Page Properties... 


a 


Para formatar o seu texto depois de digitá-lo, ou copiá-lo e colá-lo em seu 


documento, basta apenas selecioná-lo e através da barra de propriedades você 
pode formatá-lo. 
No desenvolvimento de sites atualmente, não se formata mais o 
texto diretamente em sua TAG de chamada exemplo (<font face= 
`A “Arial” >texto </font>, cria-se um estilo para a fonte e aplica-se esse 
estilo na fonte (se o estilo for somente a uma palavra ficaria <span style= “font- 
family: Arial” >texto</span>). 
Na opção formato podemos definir se será somente texto ou terá atribuições de 
cabeçalho (veremos posteriormente). 
Na opção para escolha da fonte o próprio Dreamweaver define tipos de letras 
seguras para a WEB, você deve lembrar que as letras são processadas na 
máquina do usuário, então o cuidado com a escolha das letras deve ser 


grande, mas você pode editar a lista existente, assim como criar uma nova 


lista. 
x 
+j- Font list: ES a OK | 


Times New Roman, Times, serif 


Courier New, Courier, monospace Cancel | 


Georgia, Times New Roman, Times, serif 


verdana, Arial, Helvetica, sans-serif 
Geneva, Arial, Helvetica, sans-serif 
( Add fonts in list below ) 


Chosen Fonts: Available fonts: 
Another 
Arial 
Arial Black 
Arial Narrow 
> >| Arial Unicode MS | 
another] Help | 


No próximo quadro podemos definir qual o tamanho da letra. 
Depois temos a cor da letra, a HTML baseia-se no padrão RGB de cores e os 


valores são mostrados em códigos Hexadecimais. Temos ao lado estilos de 
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texto como Negrito e itálico além dos alinhamentos básicos como esquerda 
centro, direita e justificado. 

Ao lado temos a opção de atribuir um link ao texto (assunto a ser visto 
posteriormente). O uso de marcadores e recuos. 

Através do Menu Text temos outras opções de formatação como: Estilos 
variados de formatação como, por exemplo, sublinhado, ênfase, citação etc... 


Localizar e Substituir 
O Dreamweaver pode pesquisar seu documento e localizar um pedaço de texto 


especifico. Ele também pode substituir uma string de texto por outra. 
Para localizar um pedaço de texto em seu documento, clique no Menu edit, 
Find and Replace. 


Dw Find and Replace - lol m| x| 
Find in: E Document E Untitled Document Find Next 


Search: text y] A 4 Find All | 


Find: 
Replace | 
Replace: E Replace All Bam 


Close | 


Options: [Match case [Y Ignore whitespace a 
neip = 
J” Match whole word 


J” Use regular expression 


Paragrafos e Layout 
A unidade básica de texto em HTML é o parágrafo. Enquanto o parágrafo é o 


nome específico de texto incluído pela tag <P>, os parágrafos podem ser mais 
amplamente definidos como qualquer bloco de texto especificamente 
formatado. Os tipos de parágrafos incluem itens de lista, texto preformatado e 


divisões. 


Parágrafos e Quebras de linha 
Na HTML existe uma diferença entre parágrafos HTML, com os parágrafos 


utilizados em um editor de Textos como o Microsoft® Word® por exemplo. Na 
HTML o parágrafo faz um espaçamento duplo entre um parágrafo e outro e 
permite por padrão os alinhamentos, esquerdo (padrão), centro, direita e 
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justificado. 
Já as quebras de linhas apenas quebram a linha na posição e o que vier depois 
da quebra será colocado na próxima linha, como um parágrafo de editor de 


textos. 


O texto aparece em todas as formas, tamanhos e cores. Podemos formatar nossos textos com formatações básicas como 


cores, tipos de letras e estilos como negrito sublinhado etc.... 


Podemos também adicionar observações de textos invisíveis chamados comentários, 
Lomo anotações para seus documentos. Temos também ferramentas de verificação ortográfica e de substituição de textos. 


Y 


DIV e SPAN 
Há outros tipos de blocos de texto que vocé talvez encontre <div> e <span>. A 


TAG <div> significa divisáo e é utilizada para marcar blocos de texto que 
(geralmente) se distribuem por mais de um parágrafo. Vocé náo pode terminar 
a divisáo dentro de um parágrafo, porque a TAG </div> automaticamente 
quebra o parágrafo. A TAG <span> por outro lado, pode ser utilizada para 
marcar uma área dentro de um bloco de texto individual, como dentro de um 
parágrafo ou blockquote. 

Essas duas TAGS sáo principalmente utilizadas em conjuncáo com folhas de 


estilo. 


Títulos 
Pense em títulos (Também chamados de cabecalhos) como sendo o mesmo 


que as manchetes de um jornal. Eles sáo maiores que o corpo do texto de um 
artigo e geralmente estáo em negrito. Os tamanhos de títulos váo de 1 a 6, 


sendo que o maior é 1. 
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Título de Nível 1 


Título de Nível 2 


Título de Nível 3 
Título de Nive 4 
Titulo de Nivel 5 


Título de Nível 6 


Texto Pré-Formatado 
Em geral quando você cola texto na janela de documento, ele não retém 


nenhuma formatação dele. Isso inclui quebras de linha, quebras de parágrafos, 
espaçamento, tabulações, tabelas formatadas com texto e outras mais. 

Se você formatou texto em outro programa e deseja reter sua forma, você pode 
inseri-lo no código de HTML da página como texto preformatado. Nenhuma das 
outras convenções de HTML controlará esse texto; por exemplo, em HTML, 
somente um espaço digitado será exibido, mesmo se você digitar 50 espaços 
em uma linha. No texto pré-formatado, qualquer forma do texto feita com 


espaços ou quebras de linha será preservada. 


Listas 
O Dreamweaver suporta diretamente dois tipos de listas, numeradas 


(Ordenadas) e com marcadores (Não Ordenadas). E lista de Definições. 
Podemos utilizar as propriedades do parágrafo para criar listas ou o Menu 
Texto, lista, sendo que no Menu Text, List, temos ainda a opção de lista de 


Definição, que é utilizada para sumários em seu site. 
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Listas Ordenadas 


1. abe 
2. def 
3. ghil 


Listas Náo Ordenadas 


e abc 
o def 
. ghi 


Listas De Definição 


abe 
def 


Recuando Texto 
Não há tabulações em HTML comum, o tipo de recuo de parágrafos com cinco 


espaços utilizados em outros tipos de publicação é geralmente substituído 
configurando cada parágrafo como uma linha de espaço em branco. 

Mas existem recuos de parágrafos, chamados <blockquote> que faz este 
processo. 

Este tipo de recuo pode ser feito através da barra de propriedades ou do menu 
Texto. 


Caracteres Especiais em HTML 
Há uma variedade de caracteres especiais em HTML que você pode querer 


utilizar em suas páginas. O Dreamweaver possui alguns destes símbolos, e 
podem ser utilizados a partir do menu Insert, Special Caracteres, ou através da 
aba Text do Dreamweaver. 
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Insert Other Character 3 x| 
Insert; | 


DE S Ee: 


adi 


Linhas Horizontais 
Uma linha horizontal é uma linha que atravessa a página horizontalmente e 


fornece uma divisão explicita em vez de implícita entre as partes de um 
documento. 

Para criar uma linha horizontal, clique no Menu Insert Horizontal Rule, ou clique 
no botão, na caixa de ferramentas (Aba HTML). 

Ao criar a linha horizontal e selecioná-la você pode formatá-la. 


€ Ss 
Você pode também deixar visível à barra de texto: 


é w Insert Common | Layout | Forms | Data | Spry Text Favorites 
BZ|Sem|q i] | hl h2 h3)| ul of ti | dl dt dd [a mac | 3 ~ 


IMAGENS 


Um dos recursos mais utilizados em Home Pages são imagens, e os formatos 
mais utilizados são GIF e JPG, outro formato que vem crescendo na utilização 
em HP é o formato PNG, formato reconhecido pela W3C(www.wzc.org). 

Para inserir uma imagem em sua HP, temos várias formas, a mais prática é 
clicando sobre o botão Insert Image na caixa de Ferramentas =>, outra forma, 
é através do Menu Insert. 
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É aconselhável que você coloque todas as imagens de seu site em uma única 


pasta, pois isto vai facilitar o seu trabalho e organização do site. 


Select Image Source 


Site Root | 


Server... 


Select file name from: (+ File system 


© Data sources 


21x! 


Image preview 


Examinar: | O imagens = | OE E 

E) educ08.jpg E) educ14.jpg 

(8) educ0S, jpg E) educ15.jpg 

£) educ10.jpg E) educ16.jpg 

E) educ11.jpg E) educ17.jpg 

E) educ12.jpg 

300 x 282 JPEG, 49K / 7 sec 

Nome do arquivo: [educ ipg 


Arquivos do tipo: v 


Image Files (*. gif“. jpg”. ¡peg;*. pna;* psd) 


Cancelar | 


URL: [imagens/educ01 ipa 
[Document y] index.html 


Change default Link Relative To in the site definition. 


Relative to: 


IV Preview images 


CR 
D 
. Você pode criar sua pasta de imagens, diretamente pela paleta files do 
dreamweaver, basta apenas clicar com o botão direito do mouse em alguma 
área vazia dela e depois clicar na opção “New Folder”. 
Ao se escolher a imagem a ser inserida, com definimos no inicio do projeto de 
nosso site utilizaremos XHTML ele abre uma janela pedindo as teclas de 
acessibilidade, no campo ALT, deve-se preencher a descrição da imagem, no 


campo Long description pode deixar em branco 


Image Tag Accessibility Attributes x 


Alternate text: [biblioteca] y] 
Long description: [hetp:/! a 


Tf you dont want to enter this information when inserting 
objects, change the Accessibility preferences, 
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Ao adicionar à imagem a barra de propriedades modifica-se para a 
configuração da imagem. 


i w Properties = 
E Image, 49K |w/300 sre fimagensfeducol jpg GC) at [biblioteca y] class[mone y] 2 
| H/ 282 ink... SO a BONS Oo AI 
Map EE Y Space pos Target py] Border rr EjE| E 
D ol Ol vá H Space Low Src S/0 Align [Defaut = 


a 


Quando você tem uma figura selecionada a barra de propriedades da figura lhe 
mostra a largura (W) e altura(H) da imagem. A opção Src corresponde ao local 
de sua imagem, A opção Alt preenchida anteriormente, a opção Class, permite 
atribuir uma classe a imagem, estudaremos as classes posteriormente. 

A opção link permite transformar a sua imagem em um link, veremos esse 
assunto posteriormente. E temos as ferramentas de edição. 

Ao se redimensionar uma imagem por suas alças ao lado das medidas de 


Altura e largura, o Dreamweaver mostrará um botão circular que permite 
W 366 1 


retornar as dimensões originais da imagem. "3% 


Entre as opções de manipulação para uma imagem temos: 


J Permite otimizar a imagem 


Image Preview 


Options | Fie | Animation | JPEG Y Preview Saved settings: 
en Quality 73 (0) Millions | +] 
Format: [JPEG 22,87K_3 sec D56kbps 
Quality: [73 | 


Smoothing: | No Smoothing 5 ] 


J” Progressive browser display 
IV Sharpen color edges 


Matte: E 


IV Remove unused colors 


al RHO [jos Jane M [> mM M a » 
Cancel | 
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Ni Ferramenta Crop, permite recortar a sua imagem, ao estar com a imagem 
selecionada e clicar sobre essa ferramenta, ele mostrará sob a sua imagem as 
alças de recorte, defina o corte e pressione ENTER. Importante, ao ser 
recortada a imagem somente á possível voltar através de o comando desfazer. 
sa) Resample, ao redimensionar a imagem, é possível deixar a imagem salva 


com o novo tamanho. 


Ol Permite modificar o brilho e contraste da imagem 
xi 


Brightness 


1 AS O Cancel | 
Contrast Help | 


ry 
H 


Preview 


A| Sharpen permite trabalhar o desfoque da imagem 
Sharpen eee ES 


Sharpen 
i i | 8 Cancel | 
Help | 


Preview 


Ainda temos como propriedades da imagem a opção V Space > Permite 
colocar um espaçamento vertical entre a imagem e demais objetos, H Space> 
Permite colocar um espaçamento horizontal entre a imagem e demais objetos. 
Low Src > Caso a sua imagem venha a ser muito “pesada”, e demora em 
abrir, pode-se definir uma imagem em baixa qualidade para ser aberta antes. 
Border> Permite definir se sua imagem terá bordas ou não. A o colocar link 
em sua imagem e não utilizar borda preencha o campo com O(zero). 


Align> Permite definir o alinhamento da imagem em relação à vertical. 


Mapas de Imagem 
Podemos inserir uma imagem em seu documento atribuir a esta imagem 


pontos ativos que façam a ligação com outros documentos, este processo é 
chamado de Mapa de imagens. 


Quando você insere uma imagem, automaticamente na barra de propriedades, 
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serão mostradas as ferramentas de pontos ativos retangular, elíptica e 
polígono. Ao desenhar o ponto ativo na barra de propriedades será mostrada 


uma janela para que se faça o link. 


$ w Properties 
| 2) Hotspot Link | http:,/www.hp.com.br 2 O 
Target [blank y] afe y] 
Map | computadores 
Y HOW 


Criando Rollovers simples 
Um rollover de imagem é uma ação de JavaScript que deixará você trocar a 


fonte de uma imagem por outro arquivo de imagem, de modo que quando você 
o mouse sobre uma imagem, outra imagem aparecerá. 

O objeto rollover image define um simples comportamento que realiza três 
coisas: as imagens são pré-carregadas quando a página carrega, quando o 
mouse passa sobe a imagem especificada um arquivo diferente de imagem é 
exibido, e quando os usuários movem o mouse para fora da imagem, à imagem 
original é restaurada. 

Para inserir uma figura de rollover podemos proceder da seguinte forma, 
através do botão Rollover Image, ou através do Menu Insert, Image Objects, 


Rollover Image. 


wi- P=) a D e | H Insert Rollover Image 3 x] 
[2] Image Image name: JImage1 E 
El) Image Placeholder data n PE Cancel | 
= Original image: [imagens/tecnologia.jpg Browse... 

Rollover Image | 

q Help 

E Rollover image: [ima ens/int_dest_tecnologia. j Browse... 

de Fireworks HTML o peice fos ad Browse... | 
ee IV Preload rollover image 
E Navigation Bar 
Alternate text: [tecnologia 

Px 
LJ Draw Rectangle Hotspot When clicked, Go to URL: tecnologia. html Browse... 


TO Draw Oval Hotspot 
1) Draw Polygon Hotspot 


Image Placeholder 
Image Placeholder é um objeto do Dreamweaver que você pode acrescentar 


em seu documento no espaço onde ficará uma imagem, mas que ainda não 
está pronta, mas que permite que você vá diagramando seu HTML, Para inserir 
uma imagem placeholder, você pode clicar no menu, Insert, Image Objects, 
Image Placeholder, ou clicar no botão junto às opções de imagem da aba 


Common. 


33 


Image Placeholder x] 


Name: [teste 
width: [450 Height:[300 Cancel | 
Color: | Help | 
Alternate text: [imagem de teste = 


Barras de Navegação 
Um dos recursos interessantes do Dreamweaver é a criação de barras de 


Navegação, é necessário que se crie às imagens que farão parte de sua barra 
de navegação, os mesmos podem ser criados em qualquer programa de 
imagens. 

Clique no Menu Insert, Image, Objects, Navigation Bar, ou pelo botão junto às 


opções de imagem da aba Common. 


xi 
#5) EE : 


| 
Nav bar elements: Cancel | 
Help | 


Element name: [teste 
Up image: [imagensicomputadorjpa Browse... | 
Over image: JimagensfInformatica.gF Browse... | 
Down image: [imagens/informaticajpg Browse... | 
Over while down image: Po Browse... | 
Alternate text: ¡IN RD + 
When clicked, Go to URL: [informatica. html Browse... | in [Main window y] 


Options: MP Preload images 


Show "Down image” initially 


Insert; [Horizontally had ] ÍM Use tables 


Defina o nome do elemento em sua barra de navegacáo, quais seráo as 
imagens ativa sobreposta e inativa, defina também apara onde será levado o 
link. 


Inserindo HTML gerado No Fireworks 
O Adobe® Fireworks é um programa da Adobe® destinado principalmente a 


criação de objetos gráficos e layout para sites, banners para web etc... 
Mas dentro dele podemos gerar toda a interface de um site e criar o HTML sem 


programar uma linha. Este conteúdo gerado pode ser aproveitado no 
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Dreamweaver, para isso na caixa de ferramentas, clique no Botão Fireworks 
HTML. 


Insert Fireworks HTML s x| 
— = ew 
Fireworks HTML file: | File: {//F|;cursodreamsindex.html iB 


Options: J” Delete file after insertion 


CONTEUDO MULTIMIDIA 


A Web atual é rica em recursos de multimídia, como videos, audio, efeitos, 
etc..., é claro que tudo isso depende de diversos fatores, como principalmente 
velocidade de conexão e boa distribuição do conteúdo no site. 

O Dreamweaver permite inserir de forma fácil em suas páginas HTML conteúdo 


multimídia, tornando assim seu site mais rico e interativo. 


Inserção de Animações Flash (SWF) 
Atualmente quando se pensa em animação para páginas WEB, já se pensa em 


tecnologia Flash, isso com razão, segundo a Adobe 98% dos computadores 
com acesso a internet, possuem alguma versão do plug-in do flash instalados, 
e caso o computador não possua, ao acessar uma página que contenha a 
animação em Flash ele automaticamente “baixa” o mesmo e solicita uma 
autorização para a instalação do mesmo. 

Para se inserir uma arquivo SWF (aplicação criada no flash e publicada, 
cuidado, não é correto e nem possível de visualização colocar o FLA, que é um 
arquivo de projeto), clique no menu Insert, Media Flash, ou clique sobre o botão 


A - 


utilizados na web atual são usabilidade  (ntp://ptwikipedia.org/wiki/Usabilidade) € 


insert Flash na barra. Dois conceitos atualmente muito debatidos e 
acessibilidade (nttp://pt.wikipedia.orgiwiki/acessibilidade), € O flash sempre foi considerado 
um “vilão” em relação a esses assuntos, mas na última versão a Adobe já 
trabalhou e melhorou o flash em relação a isso. Então ao inserir sua animação 
em flash no dreamweaver ele apresentará uma tela onde você pode adicionar 
alguns elementos de acessibilidade como um Title, teclas de acesso e ordem 
de tabulação do swf em sua página. 
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Object Tag Accessibility Attributes x| 


Title; [Colorindo a camiseta 
Cancel 
Access key: [d Tab index: | 1 _ Cancel | 


IF you dont want to enter this information when 
inserting objects, change the Accessibility preferences. 


Na janela que se abre, localize seu arquivo SWF e insira-o na página. Observe 
que ele vai aparecer em sua página como um retángulo cinza com o símbolo 


do flash. A barra de propriedades agora se modifica para configuracáo do 


SWF. 
i w Properties = 
y] Flash, 1K w[400 File [swfjcolorindo MCS.swf so Class [None y] e, 
| H/300 El Src | S/n 
IV Loop vspace| Quality [High y] Align [Defaut z| 
IV Autoplay Hspace| Scale [Default (Show al) +] Bg E| EH K 


Pela barra podemos configurar a dimensão do SWF, se ele ficará em looping e 
se iniciará automaticamente, o espaçamento vertical e horizontal, a qualidade, 
a forma de escala (Scale), quando seu filme possuir elementos que fiquem fora 
do palco do Flash e interajam com o filme em tempo de animação, coloque “No 
Border”. O alinhamento do flash em relação ao local onde está inserido, cor de 
fundo para o filme. 

Para poder visualizar o filme dentro do Dreamweaver, basta clicar no botão 
Play. 

A opção Parameters permite que você adicione parâmetros ao seu filme. Um 
dos parâmetros mais utilizados é quando se utiliza banners flutuantes, é que 
muitas vezes se torna necessário que o fundo de seu filme fique transparente 
onde não existe animação. Ai utiliza-se o parâmetro “wmode” com valor 


“transparent”. 
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+=] BM 


wmode [transparent A 


Inserindo Botões e Textos do Flash 
O Dreamweaver se integra facilmente as outras ferramentas da Adobe e 


podemos inserir dentro dele facilmente componentes do Flash. 

O próprio Dreamweaver já possui alguns exemplos de botões e textos prontos, 
e você pode criar seus componentes no Flash e depois inseri-los dentro de sua 
página no Dreamweaver. 

Para inserir um botão do Flash, clique no Menu Insert, Media Flash Button, ou 


através do botão Flash Button na barra de ferramentas. 


3 
Sample: 


Cancel | 
Style: Get More Styles... | 
: eCommerce-Checkout 
eCommerce-Generic Hel | 
eCommerce-Remove = a 


Generic-Gold x| 
Button text: [Comprar ss—<—sSSCisw 
Font: [verdana y] Size: [ul 
Link: [comprarhtml o Browse... | 
Target: | H 
Bg color: [gd — 
Save as: [buttons Browse... | 


A opção Flash texto permite inserir um Flash de texto com a opção de se 


colocar links no texto, e mudança de cor na rolagem. 
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Flash Vídeo 
Um dos grande recursos criado ultimamente para disponibilização de vídeos na 


WEB foi o formato FLV (Flash Vídeo), pois permite a publicação de vídeo em 
websites, sem a necessidade de um servidor de Streaming, plug-ins, etc..., 
basta apenas que o navegador do usuário tenha o plug-in do Flash instalado 
(98 % dos computadores o tem), o maior “ícone” de sucesso do Flash vídeo ao 
o site YOUTUBE (www.youtube.com), que atualmente é sinónimo de vídeo na 
Internet. 


Para se inserir um arquivo FLV em HTML com o Dreamweaver é muito fácil. 


Clique na barra de ferramentas no botão Flash Vídeo RES ou no 
Menu Insert, Media, Flash Vídeo. 
x 


video type: [Progressive Download Video y] OK 


URL: [Fantastic Four. Rise of the Silver Surfer Tra Browse... | Help | 


{Enter the relative or absolute path of the Flash Video file) 


Skin: [clear Skin 3 (min width: 260) y] 


> i aA 4) j 


Width: [320 lv Constrain Detect Size | 


Height: [240 Total with skin: 320x240 
M auto play 
Tuto rewind 


Vv Prompt users to download Flash Player if necessary 


ontent on this uires a ne rsion EB 


O To see the video, preview the page in browser. 


Na tela apresentada, é necessário definir o caminho onde está o seu arquivo 
FLV, o Skin de controle do vídeo, as dimensões (Use o botão Detect Size), as 
opções Auto play (inicia automaticamente) e Auto Rewind (reinicia 
automaticamente) sáo opcionais, e a última tela é uma mensagem a ser 


mostrada caso o usuário náo tenha o plug-in do flash. 
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a2 O Formato Flash Video criado pela Macromedia ®, e comprada 


NS pela Adobe®, é atualmente o formato mais recomendável para 

distribuição de vídeos na WEB. Para transformar seu vídeo AVI, 
MOV, etc... em FLV é necessário um programa de conversão, pois ele usa 
como compactador do vídeo o plug-in OnVp6 ou OnVP7, o Adobe Flash® 
possui junto a ele o Flash Vídeo Encoder, que faz essa conversão, mas já 


existem alguns conversores de vídeo que fazem essa conversão. 


Plug-ins 

Para adicionar outros tipos de arquivos multimídia em seu website é necessário 
à adição de um recurso chamado de Plug-in, para inserir um plug-in no 
Dreamweaver. Botão Plug in na barra de ferramentas uon o 

Na janela que se abre você deve localizar no projeto de seu site o arquivo a ser 
publicado. Os demais acertos do arquivo devem ser feitos pela barra de 
propriedades, como tamanho, borda, na opção Plug-in URL, somente preencha 
se você souber o caminho para que o mesmo possa ser baixado caso o 


usuário de seu site não o localize. 


“ w Properties 
> o Plugin, 4595K W | 320 Src | ilver_Surfer_Trailer_2.wmy CD Align [Default y] Class [None y] 
| 45 
| H [240 Plg URL (m) Do Play 
Y space Border 0 
pare 


Podemos acrescentar alguns parámetros em nosso arquivo de multimídia, 


clique no botão Parameters. 
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+=] 


ShowControls 
AutoStart 


Observe na imagem acima que adicionei dois parametros um para que ele me 
mostre os controles do filme como volume, play, pause stop. E outro para que o 
filme inicie automaticamente. 

Para arquivos que venha a ser publicados como plug-ins é 

recomendável utilizar para vídeo o formato WMV (Windows media 

vídeo) e para áudio o formato wma (Windows media áudio), 
existem diversos conversores no mercado que permite gerar esse tipo de 
arquivo. A Microsoft? disponibiliza o programa Windows Media, que é 
freeware, para converter formatos padrões de vídeo para wmv, e arquivos de 
áudio para wma. Caso você precise converter um arquivo que esteja em CD de 
áudio para wma, pode utilizar o Windows Media Player para fazer a conversão. 


Image Viewer 
Atualmente pela possibilidade se colocar conteúdo multimídia em websites, um 


uso muito comum, é criar slideshow com imagens, esse recurso normalmente é 
feito pelo Adobe Flash®, mas o Dreamweaver possui um recurso bem 
interessante para esse tipo de aplicacáo, ele mesmo gera o arquivo SWF e lista 
as imagens que vocé definir para serem colocadas como slide Show, podendo 
definir, se as mesmas teráo controles de avanco e retrocesso, se ficaráo em 
looping, possibilidade de se acrescentar legendas e hyperlinks nas imagens a 
serem mostradas. 

Para criar o slideshow, clique no Menu Insert, Media Image Viewer, a primeira 
tela é necessário definir o nome que será criado seu SWF. 
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Save Flash Element 


Salvar em: [O swt =| 005 


(2. colorindo MCS, swf 
Recent 


E 


Desktop 


o 


Meus 
documentos 


Meu 
computador 
_ 

e 


ri = Nome do arquivo: [slideshow +] 
Salvar como tipo: [Flash movie (* swf] y] 


Após salvar o seu Viewer, a barra de propriedades, vai mostrar as 


configurações para alteração. 
S Image Viewer | W |400 File | swf/slideshow. swf 33 Class | None y] 
SERES 
[Y Loop Y space Quality [High y] Align [Default y] (> pay) 
IV autoplay H space Scale [Defaut (Show all) + y] Bg E [o == 


RO 


a 


Na barra lateral direita sera criada uma paleta chamada “Flash Element’, 


através dela podemos manipular as propriedades de nosso visualizador. 


į vFashelement = 25 
“Flash element NS 
bgColor #FFFFFF 
captionColor M #333333 
captionFont Verdana 

captionSize 10 

frameColor M #333333 
FrameShow (No) 


frameThickness 2 
imageCaptions  [] 


imageLinks [‘http://macromedia.... 
imageLinkTarget _blank 
imageURLs O 
showControls (Ves) 
slideAutoPlay (No) 
slideDelay 5 

slideLoop (No) 

title 

titleColor M #333333 
titleFont Verdana 
titleSize 10 


transitionsType Random 


z 


Na propriedade ImageURLS, é 


onde devemos definir as imagens as quais 
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vamos utilizar em nosso slideshow. Ao se clicar no campo onde estão os 
colchetes ([]), ele abrirá uma nova janela onde ao se clicar no sinal de mais (+) 


ele abre uma campo para você selecionar a imagem a ser colocada. 


Edit 'imageURLs' Array 


g 01. jpg 
'imagensfeducO2.jpg' 
'imagensfeducO3.jpg' 


Ao clicar em Image Links, podemos definir o site / arquivo que será aberto ao 

se clicar na imagem 

als 
Cancel | 


value 
http: fu adobe,com.br/ 
http: fam apostilando.com.br/ 


http://www multimidiagarte,comf ln 


Ao finalizar a escolha das imagens, clique em OK. 


2 fora UOJ 


Caso vocé queira que seu slideshow inicie automaticamente, basta mudar na 
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propriedade SlideAutoPlay que está como No para Yes. Na opção SlideLoop 
você pode definir para o slideshow fiquem looping. Em TransitionsType, 


pode-se definir o tipo de transição que as imagens terão. 


HYPERLINKS 


O principal elemento que fez com a Internet crescesse como está atualmente é 
o fato de que podemos rapidamente mudar de conteúdo através de simples 
clique de mouse, os chamados Hyperlinks. 

Podemos criar links para todos os tipos de arquivos existentes, mas somente 
alguns podem ser abertos nos navegadores, os demais, serão salvos no 


computador do usuário. 


Links Absolutos e Relativos 
Antes de começar a colocar os links em suas páginas da WEB, você deve estar 


ciente dos diferentes tipos de nomes de caminho que você pode utilizar para 


vincular a outro documento na Internet 


Os nomes de caminho absolutos 
Apontam para uma localização na Internet fora do site no qual a página atual 


está localizada. No nome de caminho http://www.adobe.com.br/index.html o 
documento index.html está localizado dentro da raiz do site. 

Os nomes de caminhos relativos 

Apontam para links dentro do mesmo site, por exemplo, no site atual 
http:llwww.seusite.com.brl preciso fazer um link para o arquivo 
imagens.html, então por estar no mesmo diretório somente ligo ao nome do 
arquivo, já se preciso linkar para uma imagem localizada na pasta imagem, 
faço da seguinte forma imagem/figura.gif que o link vai procurar dentro da 
pasta imagem o arquivo figura.gif. 

Em servidores Windows não existe a diferenciação entre maiúscula e 
minúsculas no nome e extensão dos arquivos, nem sobre acentuação e 
espaços. 

Mas na internet, a grande maioria de servidores operam com o Sistema 
Operacional LINUX que baseado na UNIX, então sempre procure utilizar nos 


nomes dos arquivos de seu site, letras minúsculas, sem acentuação e sem 
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espaços, pois se você colocar letra maiúscula no nome de um arquivo e fizer o 


link com letra minúscula o arquivo não será encontrado. 


Criando Links 
Crie um texto e o selecione e observe que na barra de barra de propriedades 


ele lhe dá opção de criar um link, crie o link para este texto. Se você não sabe 


o nome correto de seu link, clique na pasta amarela à direita da caixa de link. 


[Select File Gy 
Select file name from: @ File system Site Root | 


© Data sources Server 


Examinar: E dream +] €) P o [+ 


le) exemploswf, html 


index ini 

ES index. html, LCK 

(links. html 

Nome do arquivo: [index.html 
Arquivos do tipo: an Files [*.*) y] Cancelar | 
URL: [index.html Parameters... | 


Relative to: [Document y] links. html 


Change default Link Relative To in the site definition. 


Defina o arquivo ao qual será ligado e no menu pop onde você pode especificar 
se que o link relativo à página, ou site Root para fazer o link relativo a uma 
localização central em seu site da WEB. 


i w Properties 


Format [Paragraph y] Style | None y] css | B|7 


Font | Default Font y] size | None =|| JT i= 
Page Properties... List Item... 


Podemos também para criar um link arrastar “point to file” ® diretamente até o 
arquivo a ser linkado. 

Observe que quando aplicamos as configurações de Propriedades na Página 
(menu, Modify, Page Properties — CTRL+J), e ao criarmos um link em nosso 
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texto o mesmo já fica sendo mostrado com as configurações de estilo. 
Mude a visualização para Split para que você possa ver o estilo definido para 
links (TAG “a”) e o mesmo aplicado no seu documento. 


index. html 


font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: llpx; 
color: #000000; 
font-weight: bold; 


www multimidiaearte.com 


ancora na pagina 


Observe que abaixo do campo link temos um campo chamado Target (alvo), 
quando o campo fica vazio,ao se clicar sobre o link no navegador, ele abre na 
pagina atual do link sobrepondo-a. Se eu precisar que o link abra em uma nova 
janela, basta eu especificar nesse campo a opção blank. As demais opções 
são: 

_parent> Carrega o link no frame de nível superior ao atual 

_self> Carrega o link na mesma janela ou frame 

_top> Remove todos os frames e carrega o link em uma janela inteira. 

Crie um outro texto e aplique um link nele com a opção de abrir em uma nova 


janela. 


é w Properties 


Format [Paragraph y] Style | None y] css | [B JJE 
Font | Verdana, Arial, y] Size | 11 =] [pixels y] E #000000 i= 


RX 
Y 
€ 


Um item muito importante quando se faz links para um endereco 
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absoluto como no exemplo é sempre colocar o protocolo a ser utilizado, no 
caso http://, pois se fosse colocado somente www.multimidiaearte.com o 
mesmo seria interpretado como um subdiretório com esse nome, por esse 


motivo foi usado http://www. multimidiaearte.com. 


Áncoras 
Permite criar links internos na mesma página, facilitando assim a navegacáo 


em documentos longos. 


Criando a áncora 
Primeiro defina os links que váo chamar a áncora dentro de sua página. 


Depois atribua a um texto, figura ou espaco em branco a sua áncora, através 
do Menu Insert Named Anchor. 


Named Anchor x| 
Anchor name: [ancora Ok | 


Cancel | 
Help | 


junto ao local onde a âncora será criada aparecerá uma marca "ancora 


Chamando o link da âncora 
Para criar agora o link para esta âncora na caixa de links digite 
#nomedaancora. Se a ancora estiver em outro documento coloque 


documento.htm/#nomedaancora. 


| w Properties 


Eormat [Paragraph y] Style | None y] css | 


Page Properties... List Item... 


Links para e-mail 
Podemos também atribuir link para e-mail, através de textos ou imagens, o que 


muda é a forma de chamada, para se criar o link para um e-mail, deve-se usar 


mailto:endereco@seuemail.com.br. 
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i w Properties 


Target E ] 
Page Properties... List Item... 


CR Essa forma de link para e-mail tem um problema que ao ser clicado 

2 no link ele vai abrir o programa de e-mail padrão (outlook Express, 
outlook, etc...), e muitos usuários não utilizam programas de e-mail, acessam o 
e-mail através dos próprios webmails (hotmail.com, gmail.com, yahoo.com), 
então nesses casos é aconselhável ao se criar o link colocar o e-mail para 


onde será apontado o link. 


TABELAS 


A funcionalidade da tabela foi adicionada a HTML para simplificar a 
apresentação de dados tabulares, como relatórios científicos. Atualmente a 
utilização das tabelas tem crescido e tomando o lugar do Frames na 
distribuição de dados em um site. 

Para criar uma tabela é muito importante que a mesma seja planejada e 
rascunha antes para depois minimizar o seu trabalho. 

Para inserir uma tabela clique no botão Insert Table, ou no botão de inserção 
de tabela na barra de propriedades, ela está disponível na aba Common e 
Layout. 


Table x 


Table size 


Rows: 3 Columns: 3 


Table width: 98 percent v 
Border thickness: 1 pixels 


oo 
oo 
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Defina número de linhas e colunas desejadas, se quer borda e qual será a sua 
espessura, defina a largura de sua tabela em relação à largura da tabela (em 
Pixels ou em porcentagem), o espaçamento entre as células e o espaçamento 


entre a célula e o seu conteúdo (Cell padding e Cell Spacing). 


= Table Id Rows [3 w [98 CellPad [0 Align [Default ~) Class None + 
=| = 


bs Cols |3 H pixels | Celspace 0 Border |1 
te! Got Bg color [| Brdr color || 
lo Ir Tr Bg Image gO 


Na barra de propriedades da tabela podemos alterar as propriedades de nossa 
tabela. Podemos também alterar o alinhamento da tabela, a cor de fundo da 
tabela, cor de borda e imagem de fundo da tabela. 

Ao se clicar na Aba Layout, no meio da barra, temos também os botões de 
manipulação de nossa tabela. 


é w Insert Common Layout Forms | Data | Spry | Text | Favorites 


| Standard | Expanded | | En El FA = E: 1 or D x 


p poue 
Site FREA 
aa 


E ES 
Ester 


Se você clicar com o botão direito de seu mouse em qualquer célula de sua 


tabela, ele habilita também as opções de manipulação de nossa tabela. 


Select Table 
Paragraph Format » Merge Cells Ctrl +AIHA 
List b Split Cell... Ctrl+Alt+S 
Align > 

Insert Row Ctrl+M 
Font » : 
Style z Insert Column Ctri+Shift+4 
CSS Styles > Insert Rows or Columns... 
Size > = Delete Row Ctrl+Shift-+™ 
Delete Column Ctrl+Shift+- 
Templates E 
r Increase Row Span 
Element View > 
Increase Column Span Ctri+Shift+] 
Edit Tag <td>... Shift-+F5 Decrease Row Span 
Quick Tag Editor... Decrease Column Span Ctrl+Shift+[ 
Make Link 
Rr arr eee v Table Widths 
Open Linked Page E ded Tables Mod F6 
Add tn Color Favorites al ls 


Para podermos selecionar as células (TD), linhas (TR) ou toda nossa tabela 
(Table), podemos usar o rodapé do Dreamweaver. 
<body>|<table> <tr> <td> 
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Células 

Ao clicar em uma célula, ou selecionar mais de uma célula, a barra de 
propriedades muda para a formatação de texto e abaixo as propriedades 
referentes às células. 


Y Properties 


Format | None y | Style None ~ | Css B7Z===*> Link v SD 
Font DefaultFont ~ Size None v E| Z {= £5 25 Target 
[mm Py E a PEE 
Er] Cell Horz (Default y] w No wrap | Bg | Page Properties... 
| maí em E ] - 
O JE Vert [Default v| H Header | Bg im Brdr E 


As possibilidades de alteração das células são a opção de mesclar duas ou 
mais células (na imagem o botão está inativo por termos apenas uma célula 
selecionada), ao lado do botão mesclar temos o botão dividir células, ao clicar 
sobre ele podemos dividir em colunas ou linhas. 


Split Cell EX 


Number ofrows: 2 


Ao lado temos as opções de definir as dimensões da célula largura (W — width) 
e altura (H — height), as dimensões podem ser aplicadas em pixels ou em 
porcentagem, sendo que em pixels. 

A opção No wrap tem como objetivo impedir que o conteúdo quebre para a 
linha de baixo da célula ao alcançar a largura da célula. 

A opção Header permite atribuir à célula a propriedade de célula de cabeçalho 
(título), acrescenta um negrito e um peso maior à fonte. 

Podemos também acrescentar cor de fundo e de borda a nossa tabela, bem 
como imagem de fundo. 

Tabela normal 


| | 
= — — Um - | 
[EN EE] 
Tabela Modificada 
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Célula de Topo Mesclada e com Header 


Conteúdo meslado com conteúdo 


Menu de 
conteúdo 


Na aba Layout podemos inserir / excluir linhas e colunas em nossa tabela 


ct E bl 
através de botões S ti of B . 
Podemos também desenhar nossa tabela, na aba Layout clique no botão 


Layout taot] será mostrada uma tela, pode confirmar a mesma. 
O modo layout permite que você mesmo possa desenhar a sua tabela e as 


células que vão compor a tabela a , 


Criando um Layout de site com Tabelas 


Crie um novo documento HTML e salve-o como index.html (caso ele avise que 
já existe um arquivo com esse nome, pode substituir). 
Faça as mesmas configurações com anteriormente de Propriedades da Página. 


Crie uma tabela com 780px de largura, com 4 linhas e 3 colunas 


x 
Table size 
Rows: mo Columns: EM 
Table width: EEN [pixels +] 


Border thickness: fo pixels 
Cell padding: fo EE 


Cell spacing: [0 ES 


Header 


Accessibility 
Caption: | 
Align caption: [defaut y] 


Summary: a 


Help | 
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Na barra de propriedades, clique no botão Align e mude para center. 


EE] Table 1d Rows | 4 w {720 [pixels y]  CelBad/o 2 
. Cols ER Cellpace [0 
tal tes] ta] Bg color C Brdr color o 
El Bg Image é K 


Hotéis e Resorts 


Mescle também as demais linhas, deixando todas sem divisas de colunas. 
Divida a segunda linha de acordo com quantidade botões que você vai 


precisar. No caso foi feito uma divisão em 5 colunas. 


Hotéis e Resorts esl 


divida a próxima linha de acordo com desenho de seu layout no caso foi 
dividido em três colunas e a primeira coluna dividida em e duas linhas. 
A última linha foi deixada como única, pois ale teremos as informações de 


ag om rons 


Hotéis e Resorts 


rodapé. 


ÚLTIMAS NOTÍCIAS 


| 


DICA DO DIA 


ol 
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Não fiz agora os links, nem a formatação das demais páginas, pois faremos 
isso posteriormente através de configuração de estilos CSS. 


FOLHAS DE ESTILO 


O CSS (Cascading Style Sheet) ou folhas de estilo em cascata é o recurso 
coreto de formatação de elementos dentro de seu documento HTML, seguindo 
os padrões de internet atuais recomendados deve-se sempre utilizar a CSS 
para formatação e posicionamento de TAGS HTML. 

Em nosso primeiro exemplo ao configurarmos nossa página com margens, 
definição de cores e texto para textos e links, e por trabalharmos com XHTML, 
todas essas formatações são atribuídas em código de CSS. 


index.html 
[<>] Code | <= split | | g] Design | Title: | Curso de Dreamweaver oy pe It q 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional// 
<html xmins="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset 
<title>Curso de Dreamweaver</title> 

<style type="text/css"> 


1 
y 2 
3 
4 
- 


body, td, th { 

font-family: Verdana, Arial, Helvetica, sans-serif; 
Hd] 10 font-size: 11px; 

11 color: #000000; 
12 E 

1 body { 
14 background-color: #FFFFFF; 
15 margin-left: Opx; 
16 margin-top: Opx; 
margin-right: Opx; 
18 margin-bottom: Opx; 


2p 0 Jon 


“a 
v 
k 
Ls 


21 font-family: Verdana, Arial, Helvetica, sans-serif; 
22 font-size: 11px; 
23 color: 4666666; 


eis ik | PRADO! 


25 a:link { 
26 text-decoration: none; 
27 } 


O Dreamweaver CS3 reforçou bastante o recurso de CSS para formatação nas 
páginas. 
No topo das paletas à direita temos a paleta de CSS. 
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CSS Styles 
All [Current 
Summary for Selection 
font-size 11px a 
color #666666 
text-decoration (|... none 
text-decoration (... none 


m 


color (visited) #999999 = 
About “color” & 
Properties for “a:active” 

= AE ei? T 


Para se trabalhar com as folhas de estilo é necessário algum conhecimento de 
HTML, pois ela baseia-se na formatação das TAGS HTML e suas funções. 
Podemos alterar as propriedades de uma tag existente, como podemos criar 
classes e identificadores para as TAGS onde podemos ter dentro de uma folha 
de estilo TAGS <TABLE> de tabelas com duas ou mais formatações. 

Criando uma folha de estilo baseada em uma TAG existente. 

Para criar uma folha de estilo simples clique no painel CSS clique no botão 
New CSS Style $. 


New CSS Rule 


LX 
Selector Type: © Class (can apply to any tag) 
O) Tag (redefines the look of a specific tag) e 
l Cancel 
[Hep | 


Advanced (IDs, pseudo-dass selectors) 


Define in: © | (New Style Sheet File) ~] 


©) This document only 


Marque a opção Redefine HTML Tag, automaticamente ele mostra o H1 que é 
relativo ao título de nível 1. A opção Define in: permite definir a formatação em 
um arquivo de folha de estilos, ou somente no documento atual. 


Ao clicar em OK ele abre a janela onde podemos definir a forma que terá a 


nossa TAG H1. 
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CSS Rule definition for hi =x 


Category _ Type 
Typ 
= a Font: Arial, Helvetica, sans-serif v 
Box 
Border Sze: 13 y [pixels +) Weight: bod y 
List 
Positioning Style: normal v Variant: normal X 
Extensions 
Line height: normal ~ pixels Case: none E 
Decoration: [E underine Color: | #000000 
| overline 
line-through 


[E] blink 


[7] none 


[x )( cnc )( ay ] [tee ] 


A opção Type, permite alterar as configurações de fonte d a TAG Selecionada. 


Na opção Background podemos definir as configurações de plano de fundo da 
célula. 

Em Block, podemos definir as configurações de parágrafos do texto, como 
espaçamento entre palavras, alinhamentos, etc... 

A opção Box permite criar um bloco de nossa TAG definindo largura e altura, 
etc... 

Em Border, podemos definir o tipo de borda a aplicar em nossa TAG. 

List permite alterar as configurações de nossa lista de marcadores 

Position permite trabalhar com posicionamento da TAG selecionada em relação 
ao Documento. 

Extensions: Permite definir quebras de página, cursor do mouse, e filtros a 
serem aplicados ao seu website. 

O código HTML 


hi { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 13px; 
font-style: normal; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
text-transform: none; 
color: #000000; 
background-color: #FFCC99; 

} 


A visualizagao 


Cabegalho com TAG H1 
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Editando uma folha de Estilos 
Para alterar algo em sua folha de estilo, clique no botão edit Style Sheet 4, 


será perguntado, qual o estilo existente que você quer alterar. 


Criando uma classe 
As classes permitem que se crie uma formatação especial que possa ser 


adicionada dentro de outras TAGS, por exemplo, preciso formatar as células de 
uma tabela com duas cores diferentes, posso criar duas classes e aplicar 
dentro delas, apelas clicando na tabela e depois clicando nas classes no painel 
de estilos. 


New CSS Rule 5] 


Selector Type: @) Class (can apply to any tag) ¡CE | 
Tag (redefines the look of a specific tag) (_ A AAA 


Advanced (IDs, pseudo-class selectors) | Cancel 
Name: teste| X 
Define in: © | (New Style Sheet File) -| 
9) This document only | Help | 


A formatação da Classe é igual à formatação de uma TAG HTML, a diferença é 
que é necessário atribuir a classe a TAG. 
Depois de criar a classe, selecione o elemento que vai receber a classe e 


aplique ela ao conteúdo selecionado pela barra de propriedades. 


Y Properties 


Link ~ 90 
Target 


Format [Paragraph >] stve EO (cs E7 == 


Font Courier New, C ~ Size 16 v [pixels +] [| #FFFFFF 


Page Properties... ] 


Em algumas situações será necessário aplicar o estilo em Tags não 
selecionáveis pelo modo visual do Dreamweaver, nesses casos é necessário 
aplicar o estilo pelo modo de código, basta apenas após o nome da TAG digitar 
< TAG class= “nomedaclasse” > <P class="teste">classe</p> 

O modo de aplicação de CSS que vimos até o momento está diretamente 
aplicado no documento. 

Caso tenhamos formatações de CSS que sejam aplicadas a diversos 
documentos, podemos gerar um documento com a extensão CSS e criar um 
link em cada documento para esse arquivo, isso além de padronizar seu site, 


fará com qualquer alteração de formatação, afetará em todos os documentos. 
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Para utilizar a formatação de CSS através de um arquivo externo, crie um novo 


documento, e escolha a opção CSS. 


| General | Templates 
Category: Basic page: Preview: 
Basic page e HTML 
Dynamic page (a) HTML template 
Template page @) Library item 
Other @ XSLT (Entire page) 
CSS Style Sheets @ XSLT (Fragment) 
Framesets ActionScript <No preview> 
Page Designs (CSS) 
Starter Pages @ JavaScript 
Page Designs @ XML 


Description: 
Cascading Style Sheet (CSS) document 


l Help | | Preferences... Get more content... Create Cancel | 


Coloque a formatação desejada de seu CSS nesse documento. 
Para “linkar” ao arquivo CSS criado ao documento existente clique no botão 
Attach Style Sheet * .. 


‘Attach External Style Sheet Es 
addas: © urk E 
do 

Media: X 


You may also enter a comma-separated list of media types. 


Dreamweaver has sample style sheets to get you started. 


Basta agora todas as formatações a serem feitas no arquivo CSS, serão 
aplicadas a todos os documentos ligados ao arquivo css. 


Aplicando CSS em nosso layout exemplo 
Vamos aproveitar o documento criado anteriormente e vamos aplicar CSS no 


mesmo, como nosso layout servirá de exemplo para as demais páginas, vamos 
criar nosso arquivo de css externo e depois vamos linkar ele. 


Crie um novo arquivo CSS. 
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x 


Page Type: Layout: 


B Blank P. m m 
Sigi = HTML template 


(ep) 
= 
= Library item 
» Blank Template =) XSLT (Entire page) 
=) XSLT (Fragment) 
= 


<No preview > 
¡al 7) ActionScript 
A Page from Template 


JavaScript 
=) XML 


Eh Page from Sample 


Ss Dther 


=) ASP JavaScript 
=) ASP VBScript Cascading Style Sheet (C55) document 


© 
A 
© 
= 
Es 
=) ASP.NET C# 
= 
Es 
= 
= 
= 


») ASP.NET VB 
©) ColdFusion 


» ColdFusion component DocType: | x ] 


=) JSP 


=) PHP 


volte ao seu documento index e deixe a visualização em formato de código. 
Como nós já temos um estilo CSS dentro dele, selecione e copie. 


<style type="text/css"> 


body,td,th { 


Verdana, Arial, Helvetica, sans-serif; 


color $ 000000 x 

vody { 
background-color: #FFFFFF; 
margin-left: 0px; 
margin-top: ( 
margin-right: 
margin-bottom: Opx; 


f 
t 
ext-decoration: none: 


d { 


„decoration: none; 
cole-o no arquivo CSS, e depois apague de seu index as tags <style></style>. 
É importe apenas lembrar que utilizamos esse procedimento apenas para 
ganharmos tempo, poderíamos já ter criado todo nosso CSS diretamente no 
arquivo css. 


Salve seu arquivo css como “estilos. css”. 
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Vamos agora “linkar” nosso arquivo css ao documento index.html, com o 
documento index.html aberto, clique na paleta de CSS no botão “Attach Style 
Sheet” e» .. 


Attach External Style Sheet 


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" 

“http: //uwum.w3.0rg/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

<html xmlns="http: //wi.w3.o0rg/1999/xhtnl"> 

<head> 

<meta http-equiv=" Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 


<link href="estilos.css" rel="stylesheet" type="text/css" /> 


</head> 


<body> 
<table width="780" border="0" align="center” cellpadding="0" cellspacing="0": 

<tr> 
<td colspan="5"><img src="imagens/lg hotels.jpg” alt="Logo" width="477" ] 


Vamos agora finalizar a formacáo de nosso layout. 
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Atualmente nosso layout está da seguinte forma: 


Dream holes] 


Hotéis e Resorts 
nus es sBEDAGEM OY" 


ÚLTIMAS NOTÍCIAS 
DICA DO DIA 


Vamos mudar a cor de nosso background (fundo de nossa página). Na aba 
CSS Styles, selecionando o botão All, vai aparecer todos as tags que já fazem 
parte de nosso estilo, observe que temos a opção “body”, podemos alterar as 
suas propriedades dando um duplo clique na tag. 

CSS Rule Definition for body in estilos.css 


Category Background 


Background color: [— L [#FFFFFF 
Background image: [o Browse.. E 
Repeat: | y] 
Attachment: | y 
Horizontal position: | y [pixels +] 


Vertical position: | X | [pixels v | 
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podemos também alterar as propriedades de uma tag pela própria paleta 


CSS Styles WR arenes 


| All [Current 


E estilos.css 
body,td,th 
body 


a 
a:link 
a:visited 
a:hover 
a:active 


h1,h2,h3,h4,h5,h6 


~\. Caso não apareça ás propriedades da tag selecionada é necessário 
expandir a paleta, para que isso seja possível, basta apenas posicionar o 
mouse entre o final de uma paleta e o inicio de outra, o cursos de seu mouse 
vai se transformar em uma flecha de duas pontas mantenha o mouse 
pressionado e aumente sua paleta. 
A primeira alteração que vou fazer é aplicar uma borda em volta de minha 
tabela. Eu poderia aplicar esse estilo diretamente na TAG “table”, mas isso 
afetaria qualquer página que tenha ligação com meu arquivo de CSS e 
contenha uma tabela. Então vou criar uma classe e aplicar essa classe 
somente nessa tabela. 
Para criar uma classe, clique no botão “New CSS Rule” +3. 


New CSS Rule xÍ 


Selector Type: (* Class (can apply to any tag) 


© Tag (redefines the look of a specific tag) 
€ Advanced (IDs, pseudo-class selectors) 


Name: [ bordatabela y] 
Define in: @ festilos.ess y] 


© This document only Help 


Cancel 


lp 
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Observe que dentro de Seletor Type devemos marcar a opção Class (can aply 
to any tag). Depois devemos preencher o nome de nossa classe e onde vamos 
criar a nossa classe. Pressione OK e será aberto a janela de configuração de 
estilos de nossa classe. 

Como vamos alterar a borda de nossa tabela clique na opção Border. 


CSS Rule Definition for .bordatabela in estilos.css Í x| 
Category Border 
Style width Color 
MV Same for all | | [Y Same for all IV Same for all 


Top: | solid y] Al #FF3300 


Right: | solid +] BP #FF3300 
Bottom: | solid +] El #FF3300 
Left; | solid +] i #FF3300 


so | coca | o | 


Você pode configurar o estilo de borda de sua classe, a largura do contorno e a 
cor. Como está marcada a caixa “Same for all”, indicia que o que for aplicado a 
Top será aplicado também às demais, caso essa caixa seja desmarcada você 
poderá definir propriedades diferentes para cada uma das posições de borda. 
Ao terminar de aplicar clique em OK. 

Para aplicar a classe em sua tabela é necessário selecionar a sua tabela. Para 
fazer isso clique na tag <table> no rodapé do Dreamweaver 


j 


e 


> [<table >| 


i e home mah mm em 


Depois basta aplicar a classe pela barra de propriedades. 
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QO di 


é Properties 
FE] Table Id Rows[5  w[780 pixels v] CelPad[o Align [Center ~] (Class[bordatab y] 
|=| m 
| y] Cols | 5 CellSpace | 0 Border 0 


=] tel ta] Bg color Ed Brdr color [E] 
la Bg Image | | i OD 


a 


Uma outra forma de se aplicar a classe em uma tag é pelo código. Coloque seu 
documento na visualização CODE e localize a tag <table>, dentro dela você 
pode digitar class= “bordatabela”, lembrando que bordatabela é o nome de 
nossa classe. 


<table class='" width="780" border="0" align: 
<tr> $ bordatabela 


<td colspa3 
</tr> $ Refresh Style List 


$ Attach Style Sheet... 


<tr> 
<td width="125"><div align="center"><a hi 


Como a classe criada está dentro de nosso arquivo de estilo, é necessário 
além de salvar o documento html, salvar também o arquivo CSS. Entáo clique 
no Menu File, Save All. 

Crie suas classe e aplique em seu layout. 

No layout em uso crie uma classe chamada menu e apliquei diretamente na tag 
TD (célula da tabela). 


<table class="bordatabela” width="780" border="0" align="center 
<tr> 
<td colspan="5"><img src="imagens/lg hotels.jpg" alt="Logo" 
CUE 
<tr> 
<td width="173" | MERE ddiv aliqn="center"><a href="i 
<td width="254"] class="menu">4div align="center"><a href=" 


<td width="ll2"|class="menu">4div align="center"><a href="F 


<td width="119">class="menu">4diyv align="center"><a href="r 
<td width="118"] class="menu">4diyv align="center"><a href="c 
ES TES 
<tr> 
<td><div class="titulo"><hl1>DESTAQUE</h1>< /div> 


Para poder aplicar um cor de fundo em nossos título internos que estáo como 
Títulos de nível 1, usei um recurso chamado DIV. 

Foi criado uma classe para o background dos títulos e aplicado dentro de um 
elemento DIV. 
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il WLUWI™ LLU VLADD MELIA “SILLY LL TILL “a 


</tr> 


eg) 11 >DESTAQUES /h1l></div> 


Podemos também acrescentar um estilo a somente uma TAG, é um recurso 
interessante quando o estilo for pouco utilizado em seu site. Aplicamos um 
estilo de padding a margem esquerda em uma TAG. 


<tr> 
<td valign="top"><div class="titulo"><hl>DICA DO DIA</hl></div> 
<div align="justify" lotyle="padding-left: 10px"ê ar revolto no posto 5 
itar essa área para banhos</div> 
<p>&nbsp;</p></td> 


kies” 1] 0557 E] Forms” = Images (0) Information” | Miscellaneousy .. Outline” o Resizer Tools” te) View Source” P Options” 


Dream Hotels, 


Hotéis e Resorts 


Show com Rolling Protestos marcar inicio das Olímpadas na China 

Stones dia 13 as Delegação brasileira com grnades chances de medalha 
22:00h Lula chega a Pequim para apoio aos atletas brasileiros 
Palestra com Steve Econômia volta a crescer - segundo pesquisa DATAFOLHA 
Jobs dia 14 as 15:00 

workshop de Skate 

com Sandro Dias 

“Mineirinho” dia 20 as 


10:00 
. 


Mar revolto no posto 5 com 
buracos. evitar essa área 
para banhos 


QR 
A 
Conforme já dito nessa apostila o conhecimento básico da linguagem 
HTML é realmente necessário para poder aproveitar todo os recursos que o 
Dreamweaver fornece ao usuário. A formatação CSS é um grande recurso de 


formatação de seu HTML e é uma das formas de você deixar seu site dentro de 
norma pela W3C(www.w3c.org). 
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CAMADAS E POSICIONAMENTO 


As camadas fazem parte do mundo das folhas de estilo em cascata e da 
Dynamic HTML. Uma camada é um recipiente para conteúdo de HTML, 
normalmente definido pelas TAGS <DIV> ou <SPAN>, que você pode 
posicionar em qualquer lugar em uma página. 

As camadas são denominadas camadas, porque podem ser posicionadas em 
três dimensões. Você pode configurar uma localização absoluta ou relativa 
para uma camada ao longo dos eixos x e y da página. A terceira dimensão é 
denominada índice Z e permite que as camadas se sobreponham. 

Os designers realmente adoram as camadas por sua versatilidade: você pode 
ocultar as camadas (por visibilidade) ou até partes das camadas (com o índice 
Z ou com o recorte de áreas) quando uma página inicialmente carrega. Então, 
você pode escrever um script que fará com que as áreas ocultas apareçam 
depois que certa quantidade de tempo ou quando certo evento de usuário 


acontece. 


Posicionamento CSS 
Você pode aplicar posicionamento de CSS para um bloco de texto, um 


elemento do tipo bloco, uma imagem ou uma camada. Há duas maneiras de 
aplicar posicionamento: uma é criar uma classe de estilo e aplicá-la às 
seleções ou blocos de texto que você quer posicionar na página. A outra é criar 
uma camada na janela de documento que você pode modificar 


independentemente de criar um estilo. 


Posicionamento absoluto versus relativo 
A posição de um elemento de HTML pode ser absoluta, relativa ou estática. 


O posicionamento normal é chamado estático e faz com que o elemento seja 
posicionado dentro do fluxo normal do texto. 

O posicionamento relativo significa que a posição de uma camada ou outro 
elemento é definida em relação ao canto superior esquerdo do recipiente pai. 
Entretanto, o elemento relativo está incluído no fluxo da página e também é 
embutido — ele não causa quebras de linha automáticas. 


Para garantir as propriedades inline, uma tag <SPAN> deve ser utilizada em 


64 


vez de uma tag <DIV>. 


Criando Camadas 
Para poder criar uma camada você deve deixar sua aba em Layout e deve usar 


um dos dois elementos de criação de camadas. 


File Edit View Insert Modify Text Commands Site Window Help 
é w Insert Common Layo Forms | Data | Spry | Text | Favorites R 


| Standard | Expanded al DE E ad on lO | EN EM 


“vw css E 


AP Elements 


|” Prevent overlaps 


camada 


“ w Properties 
CSS-P Element L| 105px W | 210px Z-Index | 1 Bg image | © class [None y] 


[ camada y] T| 22px H| 282px vis [default y] Bg color [| 
Overflow | y] Clip: L R 


T B 


BO di 


a 


As propriedades de nossa Layer. Da caixa de propriedades são o nome da 
layer. A propriedade Overflow é como a Layer vai se comportar no documento, 
o padrão é visível, mas podemos definir ela como Hidden (escondida), existe 
esse recurso, pois podemos através de scripts deixar ela visível em através de 
botões, textos e imagens. Scroll (com barras de rolagem), que manterá barras 
de rolagem em sua layer, isso permite que ela tenha um tamanho menor que o 
seu conteúdo. Auto que mostrará as barras de rolagem somente quando forem 
necessárias. 

A opção Left(L) e Top(T) são relativas ao posicionamento da Layer, 
observando que os pontos 0,0 (L, T) ficam no canto superior da página. 
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As dimensões de nossa Layer W (width) e H (height) são representadas 
sempre em pixels. 

Z-index é relativo ao empilhamento de nossas camadas, isso permite que 
possamos colocar uma layer sobre a outra, a camada de Z-index maior sempre 
ficará acima da outra. Um detalhe importante, animações em SWF sempre 
ficarão acima da layers independente do Z-index, sendo necessário o uso do 


parâmetro de Transparência (conforme visto no capítulo de Multimídia). 


Z- Index 02 


Z-index 03 


Vis, é referente à visibilidade da camada. 

A opção BG Image permite definir uma imagem de fundo da Layer e a opção 
BG Color, permite colocar uma cor de fundo na Layer. 

A opção Clip permite recortar nossa Layer 

No painel camadas é possível marcar a opção “Prevent Overlaps”, isso fará 


com não seja possível sobrepor às camadas. 


Escolhendo as TAGS 
Há duas tags utilizadas na criação de camadas. As tags <DIV> e <SPAN> 


criam o que é chamado de camada marquee. A tag <DIV> utilizada 
posicionamento absoluto, uma quebra de parágrafo cerca a tag<DIV>. Se 
preferir criar uma camada embutida sem quebras de parágrafo utilize a tag 
<SPAN>. 


Uma das principais vantagens das camadas é que se pode posicioná-las e 
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arrastá-las para qualquer posição de sua página, basta apenas clicar sobre o 
quadradinho no topo e arrastá-la ou alterar as propriedades Esquerda e Alto na 
barra de propriedades. 

Para redimensionar as camadas pode-se utilizar as alças de 
redimensionamento ou através da largura e altura na caixa de propriedades. 


Aninhando e Sobrepondo Camadas. 


Aninhando Camadas 
A coisa mais interessante sobre as camadas é que você pode colocar uma 


camada entro de outra ou pode criar duas camadas que se sobrepõem. 

Para sobrepor duas ou mais camadas, é somente mover uma sobre a outra. 
Para aninhar uma camada dentro de uma camada, basta criar a primeira 
camada e depois criar a segunda camada dentro da primeira. 

No painel Camadas você tem as camadas sendo mostradas, clique sobre a 
segunda camada criada e arraste-a sobre a primeira camada com a tecla CTRL 


pressionada e observe que a camada fica como uma subdivisão da primeira. 


Criando nosso layout com DIVS 
Primeiro crie uma DIV que será o quadro de nosso site. Defina pela barra de 


propriedades suas propriedades. 


i w Properties E 
C55-P Element | L| 17px W | 780px Z-Index | 2 Bg image © class [None y] 2 
[bloco x] TÍ 22px HÍ 400px Vis [visible y] Bg color Hr 
Overflow im Clip: L [ R Ea 
Tel A 
depois crie a segunda DIV que fará parte do topo de nosso site. 
= w Properties E 
css-P Element | L| O w [780px ZIndex/2 Bg image | © dass [one y] e, 
[topo y] it [oo H | 135px Vis [visbe y] Bg color az 
Overflow | H Clip L{ RL | 
tT, Bl 


Para que a layer criada fique dentro de nossa layer bloco, clique sobre ela na 
paleta “AP Elements”, pressione a tecla CTRL, e mantendo ela pressionada 


arraste ela para cima de bloco. Ela ficará como sendo “filha” da layer principal. 
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[a E bloco 2 
ad topo 2 


Veja como ficou a paleta de layers para nosso layout. 


ESS E 
AP Elements 


I” Prevent overlaps 


E Name E 
@ E bloco 
latdir 
EF miolo 
j sideshow 
noticias 
rodape 
EH lateralesq 
>= dicas 
destaques 
EFbrmenus 


a 
o 
o 


SS A A A CS E O SS | 


© Disabler Æ Cookies” | css- E] Forms” Images” © Information” — Miscellaneous” 4 Outline” ta Resizer Tools” te) View Source” | 


Dream Hotels, 


Hotéis e Resorts 


* Show com Rolling Stones dia Protestos marcar inicio das Olimpadas na China 

13 as 22:00h Delegação brasileira com grnades chances de medalha 
e Palestra com Steve Jobs dia Lula chega a Pequim para apoio aos atletas brasileiros 

14 as 15:00 Econômia volta a crescer - segundo pesquisa DATAFOLHA 
e Workshop de Skate com 

Sandro Dias "Mineirinho" dia 

20 as 10:00 


Mar revolto no posto 5 com 
buracos, evitar essa área para 
banhos 


FRAMES 


A construção de páginas em Frames embora seja possível e considerada 
ultrapassada e fora de padrões de layout atuais e futuros. Mas em algumas 
situações ela pode se tornar muito úteis. 

Embora uma página baseada em frames funcione como uma única página 
WEB, cada frame, contém um único documento de HTM que pode incluir 
conteúdos completamente separados e barras de rolagem independente. A 
cola que une esses documentos é chamada documento de definição de 
frameset ou página de frameset — um frameset é um conjunto de frames e a 


página de frameset é que define como um conjunto. 


Criando os Frames 
Para criar frames clique no Menu File New, e escolha Framesets 
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General | Templates 
Category: Framesets: Preview: 
Basic page a Fixed Bottom 
Dynamic page [E] Fixed Bottom, Nested Left 
Template page [2] Fixed Bottom, Nested Righ 
Other [2] Fixed Left 
CSS Style Sheets El Fixed Left, Nested Bottom 
Framesets E) Fixed Left, Nested Top 
Page Designs (CSS) El 
Starter Pages B 
Page Designs [2] Fixed Right, Nested Top 
E) Fixed Top 
[2] Fixed Top, Fixed Bottom 
E Fixed Top, Nested Left 
[E] Fixed Top, Nested Right — 
E] Split Horizontal D escription: a i 
[2] Split Vertical A frameset with a fixed-size top frame 
and a nested left frame. 
Document Type (DTD): 
1 pr r [XHTML 1.0 Transitional Y | 
| Help | | Preferences... | Get more content... Create 


Ao clicar no botão Create, será solicitado que se de nome aos Frames que 
compõe o seu Layout, você pode deixar os nomes padrões ou modificar de 


uma forma que facilite a identificação posterior. 


If you don't want to enter this 
information when inserting objects, 
change the Accessibility preferences. 


Podemos alterar as propriedades de nosso frames colocando bordas, cores 
para a borda, largura para a borda definir unidade de medida através da barra 


de propriedades dos frames. 


rr] Frameset Borders Border color [ _ 
rr Rows: 2 
Cols: 1 Border width |0 
Value Units 
Rom [o — 


Podemos acrescentar novas molduras criando novas subdivisões em nossos 
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frames. 

No topo digite o título de seu site ou importe uma figura que seja o titulo. 

Na parte esquerda defina alguns texto para os nossos links e na direita coloque 
um conteúdo qualquer. 

O seu layout pode estar parecido conforme abaixo. 


o 50 100 150 200 250 300 350 400 450 


ps 


Principal 


Imagens 
Links| 


Agora vamos criar nossos links, para dentro de nosso frame. Selecione a 


palavra Principal e ligue ao arquivo principal e na barra de propriedades, onde 


diz destino escolha o frame onde você quer abrir o link, no caso “mainFrame”. 


El] blank 


<body> <div> <ul> <li> <a> — He 
EDP 
Format [None y] Style None X (ess ] BIZ = g E 2 link pitia Hobe.com.br +30 
Font DefaultFont ~ Size None v E B: tE 23 Target 
[ Page Properties... | [ ListItem... | 


Salvando Frames 
Existe um cuidado muito grande ao salvar uma página com Frames, pois uma 


frame como o nosso exemplo possui 4 (quatro) páginas abertas, o topo, o 
menu, o miolo e o quadro principal que armazena o frame. 

Para salvar todas as páginas do frames, clique no Menu File Save All (salvar 
todos). Observe que o Frame quadro, será o primeiro a ser salvo (ele mostra 
uma borda grossa em volta de todos os frames. Depois ele vai salvar o miolo, 
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observe que o miolo ficará agora com a borda mais grossa. O terceiro Frame a 
ser salvo é o menu. Finalizando o processo de salvar os Frames, será salvo o 


topo. 


Alterando as propriedades de suas molduras 
Para modificar o nome e as propriedades de suas molduras individualmente, 


chame o painel Frames. 
Podemos definir qual será a página a ser aberta dentro do Frame, formatação 
das bordas, definir qual será o nome de nosso frame, se será possível 


redimensionamento, como será a paginação e largura e altura da margem. 


[mi Frame name Src | topo.html & B Borders |Default -| 
topFrame Scroll [No y Y] No resize Border color [| 
Margin width 


Margin height 


Criando Frames Embutidos (IFRAME) 
Existe uma TAG chamada <IFRAME> para fazer os frames aparecerem dentro 


de uma página. 

Para poder introduzi-la proceda da seguinte maneira abra o visualizador de 
código do HTML e insira a seguinte TAG <IFRAME SRC= “arquivo.htm” 
></IFRAME>. As propriedades do IFRAME são as mesmas do FRAME. 


html> 

chead> 

<Citle>Untitled Docwrent</titie> 

<meta ntrp-equiv="Content-Type” content="crext/html: char 
</head> 


<body bgcolor="*YFFFEF" text="#000000"> 
<p>Aqui estíaacute; o contesuacuce:do principal </p> 


Podemos também acrescentar IFRAME, pelo assistente de TAG do 
Dreamweaver. Clique no Menu Insert TAG, Clique em HTML TAGS, Page 


elements, General, Iframe. 
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Dw Tag Chooser x] 


[mm] Markup Language Tags 
El HTML tags 
Be Page Composition 


fic 


©) Browser-speci 
[2 Deprecated 
MS Formatting and Layout 


Be Lists 
ME Forms 
E 


Ma Tsahlec 


“Y Tag Info [29] 


<IFRAME> 

<IFRAME>...</ IFRAME > HTM 
An iframe element creates an inline frame within the natural flow of a docur 
frame is a rectangular space into which you may load any other HTML docur 
dynamically write content to the space), If you assign a value to the name at 
element, you may supply that name as the value of a target attribute of a, 
element that lets you define a target for a destination or returned documer w 


param (Object) 


H-E- [6] -- [E] -- 


w 
o 
La] 


Browser Specific 
Style Sheet/Accessibility - 
Alternate Content Source: file: ///C|/Users/fmarcos/sites/cursoDrean 


Name: meuiframe 
Width: 500 
Height: 500 
Margin width: 0 
Margin height: O 
Alignment: [middle x] 
Sc: 


O 


> Tag info 


[o J( cons) 


Em Source, devemos colocar qual será a página a ser aberta no IFRAME, em 


Name, deve-se colocar um nome para o IFRAME (É imprescindível o 
preenchimento desse campo, caso que faça link para abrir outras páginas 
dentro do IFRAME). 

Width e Height para definir a largura e altura do IFRAME. 

Margin width e Margin Height para definir as margens de IFRAME e do 


conteúdo interno e externo dele. 
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Alignment, forma de alinhamento do conteúdo dentro do IFRAME 
Scrolling, definição de como serão apresentadas às barras de rolagem (A 
opção Auto apresentará as barras de rolagem somente quando necessárias). 


Show Borders, permitirá ter ou não bordas em seu IFRAME. 


FORMULÁRIOS 


O Dreamweaver possui todos os recursos para a criação de um formulário, 
inclusive para formulários dinâmicos que atribuam envios para páginas 
dinâmicas como ASP, PHP, JSP, CFM. 


Os elementos de um Formulário 
Para inserir um formulário no Dreamweaver clique no Menu Insert Form, ou 


deixe visível a Aba Form do Dreamweaver. 


é w Insert Common | Layout Forms Data | Spry | Text | Favorites 


olo s Alveo gege goli gazo Ara 


Será acrescentado ao seu documento à área de seu formulário, essa área é 


representada com uma linha pontilhada de vermelho. 


i w Properties E 


| Form name enw_contato.php o Target | y] Class [título y] e 
contato Method [post y] Enctype | y] 


Na barra de propriedades deve-se definir qual será o nome do formulário a 
forma de envio. A forma de envio pode ser para um arquivo dinámico (ASP, 
PHP, etc...) que vai tratar os dados postados no formulário e enviar para um 
banco de dados ou direcionar para um e-mail, ou diretamente para um e-mail. 


É necessário também definir o Método a ser utilizado POST ou GET. 


Tipos de campos de formulário 
Para inserir os objetos do formulário, clique no Menu Insert Form Objects, ou 


clicar nos botões correspondentes na Aba de formulário. 
É importante sempre verificar se os campos estão sendo colocados dentro do 


retângulo pontilhado que é a área de nosso formulário. 
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Caixas de Texto © : Permitem que se entre com textos e números. Pode ser 
de linha simples, multilinha — Chamados de caixas de comentários, e senha 
onde ele mascara tudo o que for digitado com sinais de (*) asteriscos. 


Y Properties 


[a TextField Char width |50 Type (9) Single line Multi line Password Class None v 
nome Max Chars |250| Init val 


Ao acrescentar um campo de texto é necessário preencher alguns campos de 
propriedades. Devemos dar um nome ao nosso campo de texto, definir o 
numero de caracteres visíveis (Char width), isso implicará no tamanho do 
campo do formulário. Max Chars define um número máximo de caracteres que 


poderá ser preenchido no campo. 


Caixas de Seleção : São as caixas de checagem que permitem que se 
selecione vários para preferências do visitante e podem ter o seu estado inicial 


selecionado ou não. 


Y Properties 
| A Checkbox name Checked value | valor Initial state © Checked Class None v 
grupo O Unchecked 


Ao se criar um grupo de opções de marcação as opções deverão sempre 


pertencer ao mesmo grupo. 


Botão de Opção [e]. Permitem que o usuário faca apenas a selecáo de um 
objeto entre várias opções possíveis e também podem ter o seu estado inicial 


selecionado ou náo. 


Y Properties 


| 6 | Radio Button Checked value valor Initial state © Checked 


grupo O Unchecked 


Class None v 


Ao se criar um grupo de opções de marcação as opções deverão sempre 
pertencer ao mesmo grupo. 
Menu de Lista: Permitem que se criem menus de listagem para escolha do 


usuário. 
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Y Properties 


E List/Menu Type (0) Menu List Values... Class None v 
x! 


softwares List Alcom miie 


Initially selected |[mm= 
Flash 
Dreamweaver 


Ao criar o menu de lista na barra de propriedades é necessário clicar no botão 
Lista Values e preencher o Label (nome que vai aparecer ao usuário) e valor do 
campo ao ser selecionado. 

O padrão do campo é ser uma lista, mas podemos definir ele também como 
uma lista. Ao campo ser definido como uma lista podemos definir quantas 
linhas serão visíveis e se será possível selecionar mais de um item na lista 


(basta marcar o campo Selections — Allow multiple). 


© List Values Se 
oa ae | Lx) 
Item Label Value | Cancel 
Fireworks fireworks 
Flash flash 
Dreamweaver dreamweaver] 


Botões LJ: Permitem que se crie botões de ação de enviar (Action Submit 
Form), e limpar campos (Action Reset Form), ou para eventos através de 
linguagens de scripts (None). 


Y Properties 
| Button name Value Action (9) Submit form None Class None y 
enviar Reset form 


Crie um layout de formulário conforme a seguir. 
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Hotéis e Resorts 


No campo Nome coloque o textfield como “nome”. 


ES extField Char width | 50 Type ( Single line = © Multiline © Password Class [ None al 
= Max chars | Init val | 


wal zg a 


Para o campo e-mail preencha “email” e para o campo comentários coloque 
“comentários”. 

Você pode observar que no método de envio de nosso formulário o mesmo 
envia os dados para um documento chamado “env contato.php”. Caso você 
não tenha preenchido esse campo, basta apenas clicar na tag <form> no 
rodapé do Dreamweaver. 

Esse arquivo “env contato.php”, será o arquivo que vai receber os dados 
postados no formulário. O código que vamos criar será na linguagem PHP. 

Crie o seu arquivo env contato.php, o visualize pelo modo COD e acrescente o 
seguinte código onde ficará a sua resposta. 

<? 

llRecebendo os dados do formulário. 

$nome = $ POST["nome"]; 

$email = $ POST["email"]; 

$assunto = $ POST["assunto"]; 

$mensagem=$ POST["comentario"]; 

IISetando o restante das variáveis para o disparo do email 


$destinatario = "seumail@seuprovedor.com.br"; 
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$formato = "InContent-type: text/html\n"; 

IIincluindo os campos nome e email no corpo da mensagem. 

$msg = "- Nome: ".$nome."<br>- Assunto: ".$assunto."<br>- Mensagem: 
" $mensagem; 

HlEnviando o email 

mail("$destinatario","$assunto","$msg","from: ".$email.$formato); 
HCriando a mensagem de confirmação de envio de email. 

echo "<div align=center>Mensagem enviada com sucesso! Aguarde um 


retorno. Clique <a  href='index.php'> <b>aqui</b> <la> para 


retornar.</div>"; 
2> 
<p> 


//Recebendo os dados do formulário. 

gnome = $ _POST["nome"]; 

$email = ¢ POST["email"]; 

assunto = §_POST["assunto"]; 

$mensagem=$_POST["comentariq"]; 

//Setando o restante das variáveis para o disparo do email 
¢destinatario = "seumail@seuprovedor.com.br"; 

$formato = "inContent-type: text/html\n"; 

//Incluindo os campos nome e email no corpo da mensagen. 

$msg = "- Nome: ".$nome."<br>- Assunto: ".fassunto."<br>- Mensagem: ".fmensagem; 
//Enviando o email 

mail ("$destinatario","f$assunto","$msg","from: ".$¢email.¢formato) ; 


//Criando a mensagem de confirmação de envio de email. 


echo "<div align=center>Mensagem enviada com sucesso! Aguarde um retorno. Clique <a href='index.php'> <b>aqui</b> </a> para 
retornar.</div>"; 


> 


Dream Hotels | 


Hotéis e Resorts 


Nome 
E-mail 
comenso DUM MM 
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Mensagem enviada com sucesso! Aguarde um retorno. Clique aqui para retornar. 


Menu de Salto 
Junto á criacáo do Formulário existe uma opcáo chamada Jump Menu, que 


permite criar um menu de lista, que ao ser selecionado direcional para um link 
ou URL. 


. . ~~ = 
Para criar seu menu de Salto, clique no botao Jump Menu na Aba Form 


ump u 

= ae a 

Menu items: [elemento01 (http://www.adobe.com.br 
elemento02 (documento html 

Text: elemento02 
When selected, go to URL: documento.html 
Open URLs in: [Main window y| 
Menu name: | links] 
Options: [Y] Insert go button after menu 

E] Select first item after URL change 


Na primeira parte da janela vai aparecer o primeiro elemento a ser colocado no 
menu, na opcáo Text deve-se definir qual será o nome a ser apresentado, na 
opcáo “When selected, go to URL” vocé deve preencher com o link a ser aberto 
ou URL, para criar o seu segundo elemento clique no sinal de mais (+) no topo 
da janela. Repita o processo para os demais campos a serem criados. 

Após definido todos os campos é necessário definir a forma de abertura dos 
links, um nome para seu menu e as opções. 


A opção “Insert GO Button after menu” criar junto ao menu de lista um botão 


79 


que permitirá ir para o destino do link, com ele desmarcado, ao selecionar ele 


fará o link ao ser selecionado. 


COMPORTAMENTOS 


As ferramentas de comportamento do Dreamweaver permite que você aplique 
as ações comuns de JavaScript sem escrever nenhum JavaScript. 

Você pode fazer algo acontecer em uma página quando seus usuários 
carregam uma página, clicam em um objeto ou movem o mouse pela tela. 
Logicamente que o Dreamweaver possui as rotinas mais comuns de javascript, 
pois o JavaScript é uma linguagem de scripts Orientada a Objetos e a sua 
estrutura e construção depende do seu conhecimento em relação à linguagem 


Adicionando Comportamentos 
Adicionar um comportamento a uma página é incrivelmente simples — o 


complicado são os detalhes. Todos os comportamentos do Dreamweaver são 
adicionados e editados com o inspetor Behaviors. 
Para adicionar um comportamento a sua figura basta apenas clicar sobre o 


sinal de (+) na esquerda superior do Painel. 


i Y Tag <body> 
A Behaviors 


E + -- 


Call JavaScript 
Change Property 
Check Browser 
Check Plugin 


Control Shockwave or Flash 


Drag Layer 

Go To URL 

Hide Pop-Up Menu 

Jump Menu 

Jump Menu Ga 

Open Browser Window 

Play Sound 

Popup Message 

Preload Images 

Set Way Bar Image 

Set Text > 
Show Pop-Up Menu 

Show-Hide Layers 

Swap Image 

Swap Image Restore 

Timeline > 
Validate Form 


Show Events For > 


Get More Behaviors... 
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Pop-ups 

Importe uma imagem qualquer e clique sobre ela, depois chame as opções de 
comportamentos e escolha Open Browser Window (Abrir uma janela de 
navegador), esta é uma das opções mais comuns pelo fato de as janelas Pop- 
Up serem muito utilizadas para propaganda em WebSites. 


Open Browser Window 


URL to Display: | of {Meus documentos/site/tetet, hl | 
Window Width: |300 | Window Height: | 300 | 


Attributes: [1] Navigation Toolbar [_] Menu Bar 


L] Location Toolbar L Scrollbars as Needed 
L] Status Bar L] Resize Handles 


Window Name: | propagandal | 


Ao terminar coloque Ok e observe o painel behaviors. Observe que ele mostra 
a ação e o evento que fará com que a ação se proceda, mude o Evento para 
OnClick. 

onâbort 

onáfterUpdate 

onBeforeCopy 

onBeforeCut 

onBeforePaste 

onBeforeUnioad 


onBeforeUpdate 
onBlur 


Ocultar Mostrar camadas 
Atualmente muitos usuários utilizam bloqueadores de janelas pop-up, embora 


seja possível configurar e até mesmo autorizar à abertura de janela pop-up, a 
maioria dos usuários de Internet simplesmente a ignoram. Um dos recursos 
que tem crescido ultimamente são os chamados “banners flutuantes” que são 
Layers com a publicidade que antes eram utilizadas dentro das janelas pop-up, 
é necessário apenas criar dentro dessa janela a possibilidade de se fechar a 
Layer (assim ela vai aparecer para o usuário, mas na realidade ela ficará 
oculta). 
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Para criar seu banner flutuante, proceda da seguinte forma: 
15 Crie uma layer, de um nome a ela e coloque dentro dela o conteúdo a ser 
mostrado. É aconselhável nomear a sua layer 


FECHAR [X] 


2> É possível definir textos, imagens e mapas de imagens para chamarem o 
comportamento que permitirá fechar a janela. No caso da imagem acima foi 
definido um texto fechar. 


3> Selecione o texto e no painel Behaviors, clique na opção Show / Hide 


Layers. 
xl 
Named layers: layer "publicidade" (hide) ES 
Cancel | 
Help | 
Show | Hide | Default | 


4> Na janela aberta vai aparecer sobre as layers existentes em seu 
documento, selecione a Layer a ser fechada e clique no botão Hide. 

5> Na paleta Behaviors ele vai mostrar o comportamento criado, é necessário 
mudar o comportamento para fechar a Layer. Coloque como opção onClick, 
pois somente ao ser clicado no texto é que será fechada a Layer. 


ii w Tag <p> E 
| Attributes EA 


ae- + > 
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Validando Formulários 
Um dos recursos importantes hoje para a comunicação entre o visitante de um 


site é a possibilidade de ele fazer contato com o responsável pelo site. A 
melhor forma desse contato é através de um formulário. E para certificarmos 
que os dados sejam enviados ao destinatário, podemos validar nosso 
formulário. 


Abra nosso formulário: 


RÁRNOI|CER 


Nosso objetivo é fazer com que esses campos não possam ser enviados em 
branco e que o campo e-mail precise de um e-mail válido (não impede de ser 
enviado algo como “teste@teste.com’ . 

Clique dentro da area de seu formulário e na paleta Behaviors, clique na opção 
validate Form, será aberta a janela onde vão aparecer os campos de nosso 


formulário. 


Named fields: [text "nome" in form "contato" 


text "email" in Form “contato” (RisEmail) a | 
text "assunto" in Form "contato" 


Value: M Required 


Accept: 2 Anything € Number 


€” Number from | to | 


Observe que ele mostra o tipo de campo “text”, o nome do campo e o nome do 
formulário, no caso contato. 
Para o campo nome, basta apenas clicar sobre ele e marcar a opcáo 


“Required”, isso fará com o campo seja obrigatório. 
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Para o campo e-mail, marque a opção “Required” e marque também o radio 
button “Email address”, isso fará com ele aceite apenas endereços de e-mail. 
Para o campo assunto, marque apenas “Required”. 

Teste seu formulário e faça o envio sem preencher os campos. Observe que 


ele mostra as mensagens, mas com os textos em inglês. 


(É Untitled Document x | | 


Nome: | 
5 (É Untitled Document x | | 
E-mail | 
= Nome: [marcos 0 
Assunto a E 
| =] E-mail fajdh 


enviar | Limpar | iniii = a 
Windows Internet Explorer xÍ enviar | Limpar | 
The following error(s) occurred; Windows Internet Explorer xd 
- nome is required, 


- email is required, ` 
- assunto is required, The following error(s) occurred: 
- email must contain an e-mail address, 


Vamos arrumar nossos textos para que fiquem em português. Nas opções de 
[<>| Code | 


Você pode observar que o Dreamweaver faz todo o “trabalho” de código para 


visualização do Dreamweaver clique na opção CODE 


você. 


function MM validateForm() { 
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm. arguments; 
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM find0bj (args[i]); 
if (val) { nu=val.name; if ((val=val.value) !="") { 
if (test. index0f('isEmail')!=-1) { p=val.index0f('@'); 
if (p<l || p==(val. length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; 
} else if (test!='R') { num = parseFloat(val); 
if (isNal(val)) errors+='- '+nm+' must contain a number.in'; 
if (test. index0f('inRange') != -1) { p=test.index0f(':'); 
min=test. substring(8,p); max=test.substring(p+1) : 
if (nun<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; 
} ) ) else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; ) 
) if (errors) alert('The following error(s) occurred:1n'+errors) ; 
document. MM returnValue = (errors == ''); 
} 


Vamos entao modificar os textos de respostas para nosso idioma. 


Localize a linha nust contain an e-mail address. mude para “digite um endereço 
de e-mail válido”. 

Localize a linha is remired mude para “é requerido ou campo(s) 
obrigatório(s)”. 

Localize. agora The following error(s) occurred: 6 mude: para “Foram 
encontrados os seguintes erros”. 


Salve e teste novamente seu formulário. 
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A página http:/ /www.multimidiaearte.com diz: x 


Nome 


E-mail Foram encontrados os seguintes erros: 
- nome é requerido, 

o - email é requerido 

Comentários 


Hotéis e Resorts 


Foram encontrados os seguintes erros: 
- email Não é um endereços de e-mail válido, 


SPY (AJAX NO DREAMWEAVER) 


O framework Spry são bibliotecas no formato JavaScript e CSS, as quais 
permitem aos usuários do Dreamweaver desenvolver interfaces mais ricas e 
dinâmicas. Além de possibilitar a exibição de dados no formato XML e criar 
elementos interativos em páginas que exibem conteúdo dinâmico sem a 
necessidade de tais páginas se carregarem por completo. 

O Dreamweaver CS3 disponibiliza o Spry em duas perspectivas, uma para 
designers e outra para programadores. Os designers poderão criar efeitos 
visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre 
vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e 
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na exibição de dados armazenados em arquivos XML. Além desses recursos, 
tantos para designers quanto para programadores, o Spry oferece alguns 
widgets que auxiliam na validação de formulários. 

Vamos analisar a interface do Dreamweaver CS3 e localizar os recursos do 
Spry. Nas abas da Insert Bar localizam praticamente todos os recursos do 
framework em questão. Vamos analisar: 

A aba Spry, como demonstrada na imagem abaixo. 


é w Insert common | Layout | Forms | Data Spry Text | Favorites 
DLiIAAERjnEMD|RAER 


Disponibiliza 13 recursos, divididos em três grupos. O primeiro deles - da 


esquerda para a direita - são utilizados para se trabalhar com dados em 
arquivos XML; o segundo e o terceiro são os widgets oferecidos pelo Spry, 
utilizados na validação de formulários e na criação de elementos de interface, 
respectivamente. 

Esses grupos de recursos localizados na aba Spry, estão localizados, também, 
em outras abas. Uma vez que cada grupo de recursos corresponde a 
finalidades distintas. O que significa dizer que na aba Data, teremos o primeiro 
grupo; na aba Forms o segundo e na aba Layout o terceiro grupo. 

Os demais recursos oferecidos pelo Spry são os efeitos, effects. Ambos estão 
localizados na opção Effects do painel Behaviors, como ilustrado na imagem a 


seguir: 


É vTag <body> 
Behaviors 


Call JavaScript 
Change Property 
Check Plugin 


Drag AP Element 


Appear/Fade 
Blind 
Grow/Shrink 
Highlight 
Shake 
Slide 
Squish 


Go To URL 


Jump Menu 


Jump Menu Go 

Open Browser Window 
Popup Message 
Preload Images 

Set Way Bar Image 
Set Text » E 
Show-Hide Elements - 


Swap Image 


Quando você seleciona algum recurso do spry no Documento window do 
Dreamweaver, o Property inspector é atualizado e exibe as configurações de 
recurso em questão, veja um exemplo: 
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Menu Bar av Textl Item 1 O 
E: MenuBar1 a pu a 6 
Customize this widget 
TARER Title Target 
Spry Menu Bar 


O Spry Menu Bar, vem a facilitar a criação de menus. 
Crie um novo documento e clique sobre o botão “Spry Menu Bar”, o 
Dreamweaver vai solicitar que você salve seu documento para dar 


continuidade. Ao salvar o documento, ele vai criar uma nova pasta em seu 


projeto chamada SryAssets e vai solicitar o layout de menu que você quer criar. 
Please select the layout you would like, 
9 == Horizontal Cancel | 


Help 
e == Vertical 


Ao clicar em OK ele vai montar o menu de acordo com o solicitado. 


menu, bar.html* 


= 
117 
S 
— 
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Item 3 > | Item 4 


Para poder remover / acrescentar itens, alterar os itens de seu menu, você 


deve utilizar a barra de propriedades. 


E Bar 


Text | Dreamweaver 
S 
Microsoft Flash Link | http:{/www.adobe.com/Drean oO 
an ii Title [Dreamweaver Target | 
Turn — Off EE 
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o T N TT 


Para poder alterar as propriedades de formatação de nossa aplicação Spry, 
você deve alterar o seu CSS. 


EW SS EF UA 
CSS Styles Wa E 


all Current 
All Rules 
ul.MenuBarHorizontal ul, MenuBarSut a a 
ul, MenuBarHorizontal ul li 
ul.MenuBarHorizontal ul ul 
ul, MenuBarHorizontal ul. MenuBarSut 
ul, MenuBarHorizontal ul 
ul.MenuBarHorizontal a 
ul. MenuBarHorizontal a:hover, ul.Me 
ul, MenuBarHorizontal a, MenuBarlter 
ul.MenuBarHorizontal a, MenuBarlter 
ul.MenuBarHorizontal ul a.MenuBarll 
ul, MenuBarHorizontal a. MenuBarlter 
ul.MenuBarHorizontal ul a.MenuBarll 
ul.MenuBarHorizontal iframe 
ul. MenuBarHorizontal li. MenuBarlten 


Ll] efe 

Properties for "ul.MenuBarHorizontal a:hove.. 
M +33c 

color L] #FFF 


Add Property 


Spry Accordion 
Clique no botão Spry Accordion, será necessário salvar seu documento. 


O Dreamweaver vai mostrar em sua área de trabalho a estrutura do Menu 
Accordion. As alterações nele devem ser feitas através da caixa de 


Ferramentas. 
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Accordion Panels += av 


Accordiomi 


Customize this wid 


Clientes 
ortfolio 


Vocé pode acrescentar qualquer conteúdo HTMI dentro da área Content do 
Spry Accordion. 


Para alterar as propriedades do seu Spry é necessário utilizar a paleta de CSS. 


Content 2 


Spry Effects 
O Effects é um conjunto de efeitos visuais do Frameworks Spry, que pode ser 


adicionado em diversos elementos do HTML. No Dreamweaver os efeitos 
podem ser adicionados no modo Design, sem a necessidade de trabalhar 
diretamente com código, facilitando ainda mais a adicáo desses efeitos. O 
Effects fica localizado no Painel de Behaviors (Windows > Behaviors) como um 


comportamento normal, podendo ser ativado com diversos eventos. 
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Appear! Fade 
Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela. 


Pode usar este efeito com todos os objetos do HTML exceto o applet, body, 
iframe, tr, tbody, ou th.Para aplicá-lo você deve selecionar aonde será ativado, 
podendo ser o próprio elemento, depois ir ao Painel Behaviors do 
Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento 
(+), selecionar a opção Effects e depois o Appear/Fade. A janela de 
configuração do efeito fade ira se abrir para podemos configurá-lo. 


“ IT o 
Effect duration: [1000  miliseconds Cancel | 
Effect: [Fade y] Hep | 
Fade from: [100 % 
Fade to: [0 % 


= Toggle effect 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se você já estiver selecionado o objeto, pode escolher <Current 
Selection>. 

Effect duration: Tempo de duração do efeito em milissegundos. 

Effect: Tipo de efeito podendo ser o Fade aonde a camada vai sumindo aos 
poucos, ou Appear aonde a camada vai aparecendo. 

From: Tamanho da camada em porcentagem quando o efeito iniciar. 


To: Tamanho da camada porcentagem quando o efeito terminar 


Blind 
Esse efeito faz a camada selecionada subir ou descer lentamente semelhante 


a uma cortina que sendo aberta ou fechada. Pode ser usado somente com 
estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, 
ol, ul, li, applet, center, dir, menu, ou pré. Para aplicá-lo você deve selecionar 
aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel 
Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar 
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comportamento (+), selecionar a opção Effects e depois o Blind. A janela de 
configuração do efeito Blind vai se abrir para podemos configurá-lo. 


OK 
Target Element: [re No valid targets found, *** +] œ | 


Effect duration: [1000  miliseconds 

Effect: [bindu > teo | 
Bindupfrom: [100 [% z] 
Blind up to: po f z 


r Toggle effect 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. 

Effect duration: Tempo de duração do efeito em milisegundos. 

Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou 
Blind Down aonde a camada vai descendo na tela. 

From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar. 

To: Tamanho da camada porcentagem ou pixel quando o efeito terminar. 


Growl Shrink 
Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado 


com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, 
center, dir, menu, o pre. Para aplicá-lo você deve selecionar aonde será 
ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do 
Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento 
(+), selecionar a opção Effects e depois o Grow/ Shrink. A janela de 


configuração do efeito Grow/ Shrink vai se abrir para podemos configurá-lo. 
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RS 
ZA OO 
Target Element: |*** No valid targets found. *** bd 


Effect duration: [1000 milliseconds corcel | 
Effect: [Shrink +] te | 


Shrink from: [100 [a y] 
Shrink to: [o ao y] | le a 


Shrink to: [Center +] 
T Toggle effect 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se vocé ja estiver selecionado o objeto, pode escolher <Current 
Selection>. 

Effect duration: Tempo de duração do efeito em milisegundos. 

Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou 
Shrink aonde a camada vai diminuir na tela. 

From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar. 

To: Tamanho da camada porcentagem ou pixel quando o efeito terminar. 

To: Para que local a camada deve ir quando o efeito for selecionado podendo 
ser ao centro ou a esquerda superior. 


Shake 
Esse efeito faz o elemento selecionado dar uma tremida. Você pode usar este 


efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset, 
form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, 
pre, ou table. Para aplicá-lo você deve selecionar aonde será ativado, podendo 
ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver 
(Windows > Behaviors), clicar no botão adicionar comportamento (+), 
selecionar a opção Effects e depois o Shake. A janela de configuração do efeito 


Shake vai se abrir para podemos configurá-lo. 
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x 


Target Element: [+++ No valid targets found. ng +] o | 
Cancel | 
"e | 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se você já estiver selecionado o objeto, pode escolher <Current 
Selection>. 


Squish 

Esse efeito faz o elemento selecionado desaparecer. Você pode usar este 
efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul, 
applet, center, dir, menu, or pre. Para aplicá-lo você deve selecionar aonde 
será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do 
Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento 
(+), selecionar a opção Effects e depois o Squish. A janela de configuração do 
efeito Squish vai se abrir para podemos configurá-lo. 


x 
ZA | 
Target Element: |*** No vaid targets found. *** y 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se vocé já estiver selecionado o objeto, pode escolher <Current 
Selection>. 


Slide 
Esse efeito faz uma transicáo podendo ser para cima ou para baixo. Vocé pode 


usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or 
cente. Esse efeito requer uma única tag ID e os efeitos dentro do elemento com 
tag ID. Para aplicá-lo vocé deve selecionar aonde será ativado, podendo ser o 
próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > 
Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção 


Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir 
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para podemos configurá-lo. 


x 
OK 
Target Element: [ves No valid targets found. *** +] O | 
Effect duration: [1000 miliseconds Cancel | 
Effect: [Slide up y teo | 


Slide up from: [100 [% +] 
Slide up to: [o [% +] 
F Toggle effect 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se vocé já estiver selecionado o objeto, pode escolher <Current 
Selection>. 

Effect duration: Tempo de duracáo do efeito em milisegundos 

Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide 
Down aonde a camada vai descendo na tela 

From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar 

To: Tamanho da camada porcentagem ou pixel quando o efeito terminar 


Highlight 

Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado 
com todos os objetos do HTML exceto o applet, body, frame, frameset, ou 
noframes. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser 
o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > 
Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção 
Effects e depois o Highlight. A janela de configuração do efeito Highlight ira se 


abrir para podemos configurá-lo. 


94 


OK 
Target Element: [++* No valid targets found. bate +] JE] 


Effect duration: [1000  miliseconds Cancel 
Start Color: [ femme Help | 
End Color: WA|[#ffoo00 
Color After Effect: [ Jem 


= Toggle effect 


Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o 
efeito. Se você já estiver selecionado o objeto, pode escolher <Current 
Selection>. 

Effect duration: Tempo de duração do efeito em milisegundos. 

Start Color: Cor com qual o efeito vai iniciar. 

End Color: Cor com qual o efeito vai terminar. 

Color after Effect: Esta cor dura somente durante a duração do efeito 


EXTENSÕES DO DREAMWEAVER 


A Macromedia fornece aos usuários extensões para serem utilizadas em seus 
aplicativos, mais especificamente Flash e Dreamweaver e Fireworks. Para que 
se possa instalar uma extensão é necessário ter instalado o Extension 
Manager. 


Você pode fazer o download de extensões do dreamweaver no seguinte site: 


http://www.adobe.com/cfusion/exchangel 
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Adobe - Dreamweaver Exchange - Mozilla Firefox = È =[8] x/ 


Arquivo Editar Exibir Histórico Delicious Favoritos Ferramentas Ajuda 


O - a aA A J 8 =| Ay http://www, adobe.com/chusionfexchangefindex.cfm?event=productHometeexc=38d00 -rS Y? >| aho: ya 
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Your account iz Contact | United States (Change) f 
Search Adobe.com... al A 
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Dreamweaver Exchange 


Most Recent Most Popular Highest Rated Search Dreamweaver 


Featured 
A Search 

Creative DW Image Show 

Creative DW Image Show is a Dreamweaver extension that gives the user great image Advanced search 

transition effects in almost no time at all. The Creative DW Image Show includes in and out 

effects that enhance the transition between the images in a creative and simple way. You 

can also choose the duration of the transition effects, the pan motion start and end Dreamweaver home 

position, zoom and motion type. In this way you can customize the transition effects so 

that they could perfectly meet your requirements. SUPPORT INFORMATION Support is Browse by category 

available on the Extend Studio Forum at http:/Awww.extendstudio.com/Support/Forum/ or All 

by email at support@extendstudio.com Accessibility 

By Extend Studio App Servers 

22-Apr-08 | 3,185 downloads Browsers 

ARA Commerce 
DHTML/Layers 

License type | All >] Filter Extension Development 
Fireworks | 

[TE | conduido [dE [a E 


Wide] |GHOMAGQE ES > me. | 00. | Waa. [Sas Ds. | Er. | E>. | 60. | | FSS ILO 490 1557 
Observe que algumas extensões são pagas. 

Para poder baixar uma extensão será necessário que você possua um 
cadastro no site, não existe custo para usar os recursos do site, o que pode 
ocorrer e você encontrar uma extensão que precise ser comprada, pois como o 
site é uma comunidade, alguns desenvolvedores criam à extensão e as 


vendem pelo site. 


Instalando uma nova extensão 
Após fazer o download da extensão dê um duplo clique sobre a extensão e 


aceite as normas de uso. 
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Macromedia Extension Manager 


You are about to install the "wireFrame' extension. Please read the following carefully 
before you continue. 


EXTENSION DISCLAIMER 


PLEASE READ THIS DISCLAIMER CAREFULLY BEFORE INSTALLING 4NY 
EXTENSION. IF YOU DO NOT AGREE WITH THIS DISCLAIMER, THEN DO 
NOT USE AND/OR COMPLETE INSTALLATION OF THE EXTENSION. 


‘You are about to install an Extension provided by and/or authored by 
Macromedia or a third party. You understand and agree that Macromedia may 
NOT have authored the Extension you are about to install. 4 third party to which 
Macromedia has no relationship may have authored the Extension or Macromedia 
may have authored it. You agree that you will not distribute the Extension without 
the written consent of Macromedia and/or its licensors. You understand that the 
third party author of an Extension may require you to agree to certain terms and 
conditions between you and the third party author in order for you to use such 
authors Extension. 


In the event a third party license agreement appears under the title ‘THIRD 
PARTY LICENSE (IF ANY] below, or accompanies the Extension in a file, such 
third party license agreement shall govern the use of the Extension in lieu of any 
download license agreement you may have accepted when downloading the 
Extension from Macromedia's site; provided, however, the provisions of this 
Disclaimer shall remain effective. 


Accept | 
Será mostradas a tela com as extensões instaladas. 


FS Adobe Extension Manager -lol x| 


File Help 


Pão) | w | [Dreamweaver CS3 y] | (A) | © 
| On0ff | Installed Extensions | Version | Type (Author | 


E fsource Navigation Guide 1.0.1 Floater 
i nu Flash Element I 
Suite Webássist 


Create iPhone Style Menu on your own site with few mouse click. The menu is search engines 
friendly. You can set up navigation as ordinary HTML links. The flash file take these links and convert 
them in great looking iPhone Style menu. All other parameters can be configured by tag inspector. 


More easier, convenient and compact. All links can be indexed by search engines. Now you can add 
mp3 sounds. 


Limitation of the free version: 
- You cannot change the first button that always points to f-source.com. 
Buy the full version from www. f-source.com, and get the full version with ability to change first button. 


This Extension is accessed by selecting Insert => Media => iPhone Style Menu. 


Observe que ele mostra as extensões instaladas, uma breve descrição do que 
ela faz e como se deve acessar a ela pelo Dreamweaver. 

Vamos testar a aplicacáo dessa extensáo. 

Clique no Menu Insert, media, Iphone Style Menu 
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Insert Modify Text Commands Site Window Help 


Tag... Ctrl+E Spry Text | Favorites 

Image Ctrl+Alt+I 

Image Objects > Ed ES 

Media » Flash Ctrl+Alt-+F 

Google™ > = Image Viewer 
es iPhone Style Me 

Table Ctrl+Alt+T Eh Ental 


Será solicitado que seja salvo o arquivo SWF. Salve seu arquivo. Se for um 
HTML novo ele também solicitará que o arquivo seja salvo. 
Será acrescentada ao seu dreamweaver uma paleta chamada Flash element, 


através dela você poderá alterar as propriedades de seu menu. 


No endereço http://f-source.com/accordion-menu/iphone/#menu config você poderá acessar a 


todas as propriedades e como proceder a todas as alterações em seu menu 


fsource com 


DS 
Adobe WEB 


Dreamweaver 
Flash 


Flex 


Adobe Design 


Adobe Audio & Video 


É importante lembrar que o exemplo usado acima funciona para essa 


extensão, cada extensão terá as suas propriedades e funções. 


CONCLUSÃO 


Como pode ser visto nas páginas anteriores o Adobe Dreamweaver é um dos 
mais complexos e fascinantes programas do mercado de Webdesign, 
logicamente que não foi possível explorar todas as ferramentas e opções 
existente em um programa tão completo como esse, mas com certeza foi 


explorado e explicado as mais importantes ferramentas e modos de trabalhar 
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com este fascinante programa. 
Como auxilio em seu aprendizado, procure sempre consultar o HELP (tecla de 
atalho F1) do programa. 


El adobe Help Viewer 1.1 


le»! | = fi- | Browse [Dreamweaver cs3 al 


| Dw 


ADOBE” DREAMWEAVER” CS3 


ced 


Contents | Index 


Home Page 


Getting started 


Workspace 


Working with Dreamweaver sites 


Creating and managing files Resources 


Managing assets and libraries What's new 


Creating pages with CSS 


Laying out pages with HTML Workspace 


Adding content to pages 


Adobe Help 


Linking and navigation 


Previewing pages 


Working with page code 


Adding JavaScript behaviors 


Working with other applications 


Creating and managing templates 


Displaying XML data 


Building Spry pages visually 


Preparing to build dynamic sites 


Data sources for web applications 


Making pages dynamic 


Building applications visually 


Building ASP.NET and ColdFusion forms | x| 


Procure também sempre atualizar seu programa com os UPDATES fornecidos 
pelo site oficial do fabricante www.adobe.com.br ou www.adobe.com. 


Bem como das novidades que estão fase de testes. http://labs.adobe.com/. 


laj x) 


Adobe Labs - Homepage - Mozilla Firefox 
Arquivo Editar Exibir Histórico Delicious Favoritos Ferramentas Ajuda 


SEO cx oa IE 


http://labs.adobe.com/ Y > 


kJ + (Recently Bookmarked ~ (E) Na Faixa (E) web Design Gráfico | `] InDesign c53 [1] WhatTheFont : MyFo... | | GreenSock © Twitter / marcospfurlan Tal http:/Jwww.adobe.co... » 
(3 Disable Æ Cookies” css- C] Forms | Images” @ Information” | Miscellaneous”. Outines $ y Resizer /º Tools” $>] View Source” -> Options” Y o s 


IM Gmail - [CriarWeb] Boletim número 51 - | | [AT Adobe Labs - Homepage al 


Welcome to Adobe Labs ; 


Featured Technologies 


Sb Soundboo 


Adobe Soundbooth® beta 


Fw Fireworks 


Dw Dreamweaver 


Adobe® Dreamweaver® beta Adobe Fireworks® beta 


May 27) New features help teams and 
individual developers alike reach the next 
level in performance and functionality. 


E? Download the Dreamweaver Beta 


i) Learn more 


Latest Releases 


Camera Profiles and DNG Profile Editor 
(Jul 29) A new color rendering package 

that contains the DNG 1.2 spec, camera 
profiles, and a utility to edit them. 


(May 27) Create, edit, and optimize web 
graphics more accurately and faster than 
ever with the enhanced toolset. 


E? Download the Fireworks beta 


i) Learn more 


Pixel Bender Toolkit prerelease 4 

(Jul 16) A programming language for 
image processing and an application to 
create, compile and preview filters. 


(May 27) New tools for video editors, 
designers, and others who need to 
accomplish their everyday audio work. 


E? Download the Soundbooth beta 


i) Learn more 


Most Popular 


Adobe Flash Player 10 beta 2 

An opportunity for developers and 
consumers to test and provide early 
feedback to Adobe on new features. 


